Meta Stack Exchange is where users like you discuss bugs, features, and support issues that affect the software powering all 158 Stack Exchange communities.

What is meta?
Here's how it works:
  1. Any Stack Exchange user can ask a question
  2. The community provides support, votes on ideas, and reports bugs
  3. Your voice helps shape the way Stack Exchange operates

<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.

share|improve this question
That's why you use them judiciously (goofy, but awesome!, answers below withstanding) and use the necessary white space to make the post look good. I think it's pretty cool. – raven Jul 2 '09 at 20:21
Now all they need is an onclick handler to make them look like you are pressing them. Then an alert box pops up and says "On your keyboard, idiot!". – Macha Jul 2 '09 at 20:25
ok improved, will deploy later – Jeff Atwood Jul 5 '09 at 7:14
Thanks for taking care of the little things like that Jeff. The polish really does help make this a great site. – jjnguy Jul 7 '09 at 20:36
Thanks, Jeff! :) – Paul Fisher Jul 8 '09 at 1:54
@Macha jQuery('kbd').click(function(){alert('On your keyboard, idiot!');}); – Yahel Jan 8 '11 at 18:31
@Mache: see my answer :P – nyuszika7h Jan 14 '11 at 13:07
+1, but for the current rendering too! Still too ugly, and hardly ever useful in my opinion. – Arjan Nov 28 '11 at 18:12
The kbd graphics are cool in my opinion why get rid of them? – dragonloverlord Apr 15 '13 at 15:28
why doesn't this work on Mathematics? – Ephraim Jun 23 '14 at 4:44

19 Answers 19

up vote 81 down vote accepted
kbd {
    background:#EEEEEE none repeat scroll 0 0;
    border-color:#CCCCCC #AAAAAA #888888 #BBBBBB;
    border-width:1px 1px 2px 2px;
    padding:2px 1px;

..would make <kbd> a bit less broken:

Demonstration of above CSS

Sadly, it breaks Pesto's castle.

share|improve this answer
+1: Seems to be the default padding in the SO CSS that is the problem. BUt changing it would probably destroy most of the answers here :-) – Richard Jul 3 '09 at 10:23
Is this something one can run using Tampermonkey as a script to override the default <kbd>...</kbd> specification? If so, how do you go about doing that? – Werner Jul 14 '14 at 20:39
@Werner It would be very easy to do with the "Stylish" addon for Chrome/Firefox. Also definitely doable with Tampermonkey, you'd just need to inject the CSS via Javascript (searching for "tampermonkey add css" should find something).. but in this specific case, why do you need to? The site has been updated to make the kdb element much nicer – dbr Jul 15 '14 at 13:51
@dbr: Not on TeX - LaTeX where I contribute mostly. – Werner Jul 15 '14 at 15:30



original keyboard castle

share|improve this answer
You've just beaten the internet. – Eric Jul 2 '09 at 21:03
I just had a flashback to elementary school and NES-filled nights.. so awesome! – Jarrod Dixon Jul 5 '09 at 7:02
It probably looks different on every combination of screen size, resolution, font, and operating system. On mine the blank spaces are too small. – Brad Gilbert Jul 5 '09 at 15:51
Slow work day, wasn't it? – perbert Jul 28 '09 at 17:01
Did you use a script for this? Or all by hand... – Zifre Jul 28 '09 at 18:42
A true artiste does it all by hand, though there may have been some cut-and-paste. – Hilarious Comedy Pesto Jul 28 '09 at 18:50
Despite being empty of princess, this castle is full of win. – sirlancelot Aug 5 '09 at 22:49
Oh noes! Now the castle is in another castle! – random Sep 26 '09 at 5:49
I rolled it back now that the <kbd> element is back! – uɐɯsO uɐɥʇɐN Nov 22 '10 at 1:45
@George, but it looks different? – Arjan Nov 27 '10 at 22:54
@Arjan: Not my fault :P – uɐɯsO uɐɥʇɐN Nov 27 '10 at 22:59
But you did break the nice result, @George! – Arjan Nov 27 '10 at 23:04
@Arjan: I just rolled it back to the way it was originally! – uɐɯsO uɐɥʇɐN Nov 27 '10 at 23:06
No, it did not look like that bad a year ago, did it @George? – Arjan Nov 28 '10 at 7:25
Uh oh. I think the castle is now slightly lopsided. Unexpected geological activity! – nhinkle May 5 '12 at 1:16

`1234567890-= ←
Tab qwertyuiop[]
Caps asdfghjkl;' Enter
Shift    zxcvbnm,./  Shift   
Ctrl Alt                          Alt

This is the most fun I've had all day.

original keyboard

share|improve this answer
+1 for the completion of what I tried to do...but also +1 because trying was also the most fun I've had...although... – Thomas Owens Jul 2 '09 at 19:46
Try and change it to the Billy Mays button – TheTXI Jul 2 '09 at 19:53
Hey, where's the spacebar? – fretje Jul 2 '09 at 20:25
Whoneedsaspacebar? – mmyers Jul 2 '09 at 20:27
You made me laugh man. Thanks xD – Andrea Ambu Jul 2 '09 at 23:45
Now try a UK keyboard with a double height enter key :-) – Richard Jul 3 '09 at 10:21
are the m, j, l, and i letters on that keyboard (in jeff's link) a little bit red or am I going insane? Maybe I'm a synesthete. – Carson Myers Aug 5 '09 at 22:37
@Carson Either you're not insane or I am too. – deleted Aug 20 '09 at 23:27
I can see the red, it might be a result of anti-aliasing, think of the subpixels! – Liam Sep 8 '10 at 15:48
Updated keyboard to new format :D (with a spacebar, @mmyers :P) – Riking Mar 11 '13 at 23:26

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 

Orginal (image form)

alt text

share|improve this answer
The right Ctrl key is sticking out to the right for me (on IE7). Is it meant to be flush with the others? – mmyers Jul 2 '09 at 20:29
Here as well (FF3) – fretje Jul 2 '09 at 20:30
Cant test IE7 :S He is a little bit to the right here but only 1 pixel or so (FF 3.5) – Ólafur Waage Jul 2 '09 at 20:31
The right edge of the Shift key is about even with the 'r' in "Ctrl". – mmyers Jul 2 '09 at 20:33
I think it's more that the 4th line is sort. – Ólafur Waage Jul 2 '09 at 20:33
Ok wow, well im on linux so the font difference is a possible culprit. – Ólafur Waage Jul 2 '09 at 20:33
There's quite a difference on Chrome. The third line is about 1 pixel longer (but that's only noticeable 'cos I'm looking). Oh, don't think I'm not impressed BTW. – ChrisF Jul 2 '09 at 20:37
Ok i see the issue in IE now. Ill propose a patch for it soon and commit it to jeff so my keyboard always looks good :D – Ólafur Waage Jul 2 '09 at 20:39
@Jeff is this after the change on a Windows machine? Since on Linux this keyboard has about a 10 pixel space between each line. Or is that the intended change? – Ólafur Waage Jul 5 '09 at 12:04
Opera v9.64: the right Ctrl key is sticking out to the right. – Peter Mortensen Aug 5 '09 at 23:30
@Peter it no longer looks as intended. Check out Jeffs image here in the comments. – Ólafur Waage Aug 6 '09 at 10:40
+1 - Thanks for providing those who hadn't seen the old -vs- new, the opportunity to do so. This should be pinned at the top of the answers! :) – user66001 Sep 10 '13 at 18:03

I tried to make a keyboard and failed miserably. :(

Although I will present this:


The mystical Any key.

share|improve this answer
obligatory Simpsons reference: – Keith Hall May 20 at 8:48

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.

share|improve this answer
I thought we couldn't have nice things because of me. But I guess it was you all along. – Thomas Owens Jul 2 '09 at 19:25
Shouldn't the T be a Shift+t? – BalusC Jul 1 '12 at 19:48
@Chichiray FREE COUNTRY I DO WHAT I WANT – Paul Fisher Jul 5 '12 at 21:48
IN UR POST USIN MY FREEDOMS – badp Oct 25 '12 at 21:02
@badp: Because that really needed to be fixed. – Robert Harvey Oct 25 '12 at 21:06

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



















share|improve this answer
Our princess could never be in that castle. It's so... plain ... and white. – Cody Gray May 7 '12 at 10:34
@ThE blame Jin, not me. ;-) – Manishearth May 7 '12 at 10:46
I bow to your brick laying skills. – Jin May 8 '12 at 5:07
@Jin: Technically, they're tiles, now that someone changed the design ;-) . Anyway, the design is actually much better--I just felt sorry for the poor castle :P – Manishearth May 8 '12 at 5:19
@animuson The flag has a unicorn! Try doing THAT with inline code blocks! – Manishearth May 9 '12 at 7:55

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)

rendered 20-11-2012

share|improve this answer
Best one yet. I am in awe. – Justin Morgan Nov 20 '12 at 4:15
I'm horrified at the amount of time you must have spent on building this! ;) – Shadow Wizard Nov 20 '12 at 7:29
Finally, a propper M+104 keyboard layout... though I prefer my Unicomp 103-key, which has original spacing. – Tracker1 Aug 13 '15 at 1:21

I would like to propose that from here on out we replace

Caps Lock


Billy Mays

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.

share|improve this answer
Seconded. Now only to get PC makers to get on this. – Thomas Owens Jul 2 '09 at 19:37
MAY HE REST IN PEACE!!! – Bill the Lizard Jul 2 '09 at 20:08
Was he similar to BRIAN BLESSED? – TRiG is Timothy Richard Green Aug 6 '11 at 1:29

I totally agreeI totally agreeI totally agreeI totally agreeI totally agree

I totally agree

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.

share|improve this answer
Wow it's even worse than backticks... hope it won't become the new formatting trend any time soon! – Shadow Wizard Feb 9 '14 at 21:48
Lol, I'm going to start putting all my answers in a Button Nexus like above to draw more attention to them. – xdhmoore Dec 19 '15 at 20:33

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.

share|improve this answer
cough – Ullallulloo May 9 '12 at 18:39
@Ullallulloo: Yes, I know, he completed my challenge. Then I threatened to pull out the ASCII art, which I may yet still do. – animuson May 9 '12 at 19:05

Atwood should have never told us about this. This will only end in disaster.

share|improve this answer

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 


share|improve this answer
I give up. Which is it? – Carson Myers Aug 5 '09 at 22:44
The function keys give that away, if only from a top view. Its also the C-64C. – Tim Post Jul 1 '10 at 23:22
@Tim: there's also a [restore] key; I've never seen that on another system. – Marcel Korpel Dec 3 '10 at 21:44

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

share|improve this answer
Now it looks like Messages on the iPhone... – Cody Gray May 9 '12 at 8:09


share|improve this answer
+1 for an actual legitimate usage of <kbd> (plausibly on gaming.SE). – Slipp D. Thompson Jun 30 at 3:18

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


  ←  ↓   →  

share|improve this answer
If only that were an actual key on my keyboard... – Eric Jul 2 '09 at 19:20
+1 for echoing my thought exactly! – Kip Jul 2 '09 at 20:01
Paul has unleashed a monster. – raven Jul 2 '09 at 20:18
You missed the arrows: ← ↑ → ↓ – DisgruntledGoat Jul 8 '09 at 14:04

       am ok

     w  i t  h 

  t   h   i   s  

share|improve this answer

Am I late?

esc F1 F1 F1 F2 F3 F4 F5 F6 F7 F8 F9 F10

~` !1@2 #3$4 %5^6 &7*8 (90) _-+=                 delete

tab                    Q W E R T Y U I O P {[ }]    |\   
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 of my keyboard)

share|improve this answer
Just a little ;) – J Atkin Jan 16 at 19:52

Eliminating this is an affront to Emacs users everywhere. They will then delete SO with:

Ctrl + End + Del + S + O + F8

share|improve this answer
False! There is no way there is an emacs keybinding for that without Meta, Super and/or Hyper. – derobert Sep 6 '09 at 9:52
-1: I tried that, and a million "Save As" windows appeared. – Dimensio1n0 Nov 10 '13 at 9:07

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .