<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.
12
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.
4
` 1 2 3 4 5 6 7 8 9 0 - = ← Bksp Ins HomePgUp
Esc F1F2F3F4 F5F6F7F8 F9F10F11F12 PrtScScrLkPse
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.
Num / * -
7 8 9 +
4 5 6 +
1 2 3 En
0 . ter
This is the most fun I've had all day.
10
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)
13
I tried to make a keyboard and failed miserably. :(
Although I will present this:
Any
The mystical Any key.
0
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.
6
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)
4
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!
6
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>
Though I always wanted to make an unpressable button.
And, ladies and gentlemen, the nothing-button!
You see, now that this is fixed,
I use buttons all day long.
3
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.
3
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.
4
Atwood should have never told us about this. This will only end in disaster.
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
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
1
Am I late?
~` !1@2 #3$4 %5^6 &7*8 (9)0 _-+= delete
tab Q W E R T Y U I O P {[ }] |\
esc F1 F1 F1 F2 F3 F4 F5 F6 F7 F8 F9 F10 ⏏
⇪ caps lock A S D F G H J K L :; "' ↵ return
shift ⇧ Z X C V B N M , >. ?/ ⇧ shift
⌃ control ⌥ alt option cmd ⌘ ⌘ cmd alt ⌥ option ⌃ control
(based off of my keyboard)
0
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
↑
← ↓ →
1
Eliminating this is an affront to Emacs users everywhere. They will then delete SO with:
Ctrl + End + Del + S + O + F8
2
If you have an older Mac keyboard (just for fun, of course):
escF1F2F3F4F5F6F7F8F9F10F11F12F13 F14 F15 F16
- +x⏏︎
` 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 ◄ ▼ ▶
c = / *
7 89 -
4 56+
1 23
0 . ⏎
Explore related questions
See similar questions with these tags.



