<kbd> is a great way to mark up text to be entered. But when you use it on Stack Exchange sites, it's really difficult to read. For instance, say I typed this sentence by starting with a Shift+F, then used o, followed by r, then space, you can see that it quickly becomes an unreadable mess of boxes and smashed-together type.
Whoever is in Ctrl of the visual design should probably fix it.
Also, I'm so very sorry. Please don't let the silly answers below discourage you from fixing the styling.
kbd {
-moz-background-clip: border;
-moz-background-inline-policy: continuous;
-moz-background-origin: padding;
background: #EEEEEE none repeat scroll 0 0;
border-color: #CCCCCC #AAAAAA #888888 #BBBBBB;
border-style: solid;
border-width: 1px 1px 2px 2px;
color: #000000;
padding: 2px 1px;
white-space: nowrap;
}
...would make <kbd> a bit less broken:
Sadly, it breaks Pesto's castle.
<kbd>...</kbd> specification? If so, how do you go about doing that?
OUR PRINCESS IS IN ANOTHER CASTLE!
Esc F1F2F3F4 F5F6F7F8 F9F10F11F12 PrtScScrLkPse
` 1 2 3 4 5 6 7 8 9 0 - = ← Bksp Ins HomePgUp
Tab ↹ Q W E R T Y U I O P [ ] \ Del End PgDn
Caps A S D F G H J K L ; ' ↵ Enter
⇧ Shift Z X C V B N M , . / ⇧ Shift ↑
Ctrl ⊞ Alt Alt ⊞ Ctrl ← ↓ →
I'll put the NumPad below, 'cause it wouldn't fit if I placed it beside the keyboard.
This is the most fun I've had all day.
This is a very old post and the system has changed, it includes the original code for the keyboard and below it the image it generated, currently the original code does not make a good keyboard.
Trying out beat Pesto's keyboard. Mine has square buttons and correct spacing between items.
° 1 2 3 4 5 6 7 8 9 0 ö - Backspace
Tab q w e r t y u i o p ð ' ENTER
Caps a s d f g h j k l æ ´ +
Shift < z x c v b n m , . þ Shift
Ctrl ❖ Alt Space Alt ❖ Menu Ctrl
Original (image form)
<kbd> element has probably changed more than 2 times already, but I like the current keyboard more. It's not bad, just more modern.
Commented
Jul 28, 2019 at 9:53
I tried to make a keyboard and failed miserably. :(
Although I will present this:
Any
The mystical Any key.
Shiftt h i s space i s space w h y space w e space c a n ' t space h a v e space n i c e space t h i n g s .
Or so I'm told.
T be a Shift+t?
Shift + t makes T (as opposed to t^Ht^Httt^H^H^H Shift Shift Shift Shift Shift Alt y T).
Commented
Oct 28, 2017 at 18:57
Esc F1F2F3F4 F5F6F7F8 F9F10F11F12 PrSnScLkBrek
` 1 2 3 4 5 6 7 8 9 0 - = Backspace Ins HomePgUp
Tab q w e r t y u i o p [ ] \ Del End PgDn
Caps a s d f g h j k l ; ' Enter
Shift z x c v b n m , . / Shift ▲
Ctrl Win Alt Alt Win MenuCtrl ◀ ▼ ▶
I couldn't find my keyboard layout here, so I thought I'd post it. You guys are using real small keyboards... (image below for posterity in case the CSS changes in future)
Brek sounds pretty funny to me. I was going to suggest Brk, but that sounds more like bark now.
Felt sorry for the poor broken{*} castle, felt that it MUST be fixed as a tribute to the history of meta.
Take THAT, Jin!!
*Today I realised that non-breaking spaces can break stuff as well O-0
OUR PRINCESS IS IN ANOTHER CASTLE!
png files can have clear transparent pixels and pixels in a jpeg. imgur.com always converts .png to .jpeg where every 100% transparent pixel becomes 100% jet black. I have no idea how you got the horse on a bed of grass to show up with a clear transparent background instead of a black one.
Commented
Sep 22, 2022 at 22:57
I totally agreeI totally agreeI totally agreeI totally agreeI totally agree
I totally agree
this is another pyramid lol.
You know, I totally agree.
You see, on my posts I'm never intrusive, that's why I never use <kbd></kbd>
And, ladies and gentlemen, the nothing-button!
You see, now that this is fixed,
all day long.You don't need keyboards to make castles! Inline code blocks work just as well!
Look, it has a flag! Try doing that with keyboards!
���
P.S. The new keyboard styles are awesomesauce. The unicorns are happy.
I would like to propose that from here on out we replace
Caps Lock
with
William Darrell "Billy" Mays, Jr. (July 20, 1958 – June 28, 2009) was an American television direct-response advertisement salesperson most notable for promoting OxiClean, Orange Glo, and other cleaning, home-based, and maintenance products. His distinctive beard and loud sales pitches made him a recognized television presence in the United States.
▲▲▼▼◄►◄►BA
I couldn't resist:-)
Which computer had this keyboard?
⟵ 1 2 3 4 5 6 7 8 9 0 + - £ HOMEDEL f 1
CTRL Q W E R T Y U I O P @ * ↑ RESTORE f 3
RUNSHIFT A S D F G H J K L : ; = RETURN f 5
C=SHIFT Z X C V B N M , . / SHIFTCRSRCRSR f 7
I saw this in an answer once
and have been baffled about how it worked
ever since then. But I
guess I know now. I'm terribly sorry about this
it looks like a label maker
Am I late?
��
(based off of my keyboard)
I had no idea you could even do this, but now that I know, I want to do it everywhere!!!
Ins HomePgUp
Del End PgDn
↑
← ↓ →
Eliminating this is an affront to Emacs users everywhere. They will then delete SO with:
Ctrl + End + Del + S + O + F8
If you have an older Mac keyboard (just for fun, of course):
escF1F2F3F4F5F6F7F8F9F10F11F12F13 F14 F15 F16
` 1 2 3 4 5 6 7 8 9 0 - = delete help homepgup
tab Q W E R T Y U I O P [ ] \ ⌫ end pgdn
caps * A S D F G H J K L : ' return
shift Z X C V B N M , . / shift ▲
ctrl ⌥⌘ ⌘⌥ctrl ◄ ▼ ▶
- +x⏏︎
c = / *
7 89 -
4 56+
1 23
0 . ⏎
jQuery('kbd').click(function(){alert('On your keyboard, idiot!');});