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

  • 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
  • 258
    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
  • 25
    ok improved, will deploy later – Jeff Atwood Jul 5 '09 at 7:14
  • 1
    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
  • 61
    @Macha jQuery('kbd').click(function(){alert('On your keyboard, idiot!');}); – Yahel Jan 8 '11 at 18:31
  • 1
    @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
  • 6
    The kbd graphics are cool in my opinion why get rid of them? – dragonloverlord Apr 15 '13 at 15:28
  • 1
    why doesn't this work on Mathematics? – Ephraim Jun 23 '14 at 4:44
  • Protected this to prevent at least some of the abusers to abuse the <kbd> tags. – Shadow Wizard Sep 1 '16 at 22:04
  • @Ephraim it appears to work just fine now, at least in preview – Shadow Wizard Sep 1 '16 at 22:11
  • 2
    Got a new MacBook Pro with Touch Bar, just came here for ESC – Alex Wiese Mar 8 '17 at 0:44

20 Answers 20

up vote 100 down vote accepted
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:

Demonstration of above CSS

Sadly, it breaks Pesto's castle.

  • +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
  • 1
    @dbr: Not on TeX - LaTeX where I contribute mostly. – Werner Jul 15 '14 at 15:30

                                                                                                               
                                                                                           
                                                                                           
                                                                                            
                                                                                            
                                                                                            
                                                                                                                               
                                                                                                  
                                                                                                        
                                                                                                  
                                                                                                          
                                                                                                      
                                                                                                              
                                                                                                  
                                                                                                              
                                                                                                  
                                                                                                              

OUR PRINCESS IS IN ANOTHER CASTLE!


original keyboard castle

  • 340
    You've just beaten the internet. – Eric Jul 2 '09 at 21:03
  • 6
    I just had a flashback to elementary school and NES-filled nights.. so awesome! – Jarrod Dixon Jul 5 '09 at 7:02
  • 5
    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
  • 63
    Slow work day, wasn't it? – perbert Jul 28 '09 at 17:01
  • 4
    Did you use a script for this? Or all by hand... – Zifre Jul 28 '09 at 18:42
  • 71
    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
  • 43
    Despite being empty of princess, this castle is full of win. – matpie Aug 5 '09 at 22:49
  • 33
    Oh noes! Now the castle is in another castle! – random Sep 26 '09 at 5:49
  • 1
    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
  • 19
    Uh oh. I think the castle is now slightly lopsided. Unexpected geological activity! – nhinkle May 5 '12 at 1:16


 Esc      F1F2F3F4   F5F6F7F8   F9F10F11F12 PrtScScrLkBrk

 `  1  2  3  4  5  6  7  8  9  0  -  =   ← Bksp    InsHomePgUp
  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 place 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.


original keyboard

  • 15
    +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
  • 3
    Try and change it to the Billy Mays button – TheTXI Jul 2 '09 at 19:53
  • 10
    Hey, where's the spacebar? – fretje Jul 2 '09 at 20:25
  • 251
    Whoneedsaspacebar? – mmyers Jul 2 '09 at 20:27
  • 2
    You made me laugh man. Thanks xD – Andrea Ambu Jul 2 '09 at 23:45
  • 23
    Now try a UK keyboard with a double height enter key :-) – Richard Jul 3 '09 at 10:21
  • 1
    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
  • 1
    @Carson Either you're not insane or I am too. – deleted Aug 20 '09 at 23:27
  • 5
    I can see the red, it might be a result of anti-aliasing, think of the subpixels! – Liam Sep 8 '10 at 15:48
  • 1
    Updated keyboard to new format :D (with a spacebar, @mmyers :P) – Riking Mar 11 '13 at 23:26
  • I made many changes to the keyboard. I fixed the spacing, so the keyboard looks more rectangular in shape. I also changed it into a Windows keyboard. I added function keys. I replaced arrow keys. I added 9 keys above the arrow keys. I added the NumPad. And lastly, I added the keyboard background and borders. – Lloyd Dominic May 3 at 7:52

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)

alt text

  • 14
    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
  • 6
    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
  • 6
    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:

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.

  • 23
    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
  • 9
    Shouldn't the T be a Shift+t? – BalusC Jul 1 '12 at 19:48
  • 14
    @Chichiray FREE COUNTRY I DO WHAT I WANT – Paul Fisher Jul 5 '12 at 21:48
  • 16
    IN UR POST USIN MY FREEDOMS – badp Oct 25 '12 at 21:02
  • 7
    @badp: Because that really needed to be fixed. – Robert Harvey Oct 25 '12 at 21:06
  • Shift + t makes T (as opposed to t^Ht^Httt^H^H^H Shift Shift Shift Shift Shift Alt y T). – wizzwizz4 Oct 28 '17 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)

rendered 20-11-2012

  • Best one yet. I am in awe. – Justin Morgan Nov 20 '12 at 4:15
  • 44
    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
  • Brek sounds pretty funny to me. I was going to suggest Brk, but that sounds more like bark now. – Brandon Ibbotson May 1 '17 at 11: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

                                                                                   
                                                                    





                               
                                                                                  

                                                                            

                                                                                  

                                                                                  

                                                                                  

                                                                                                                            

                                                                                   

                                                                                         

                                                                                    

                                                                                           

                                                                                                 

                                                                                                       

                                                                                             

                                                                                                       

                                                                                            

                                                                                                        

OUR PRINCESS IS IN ANOTHER CASTLE!

  • 3
    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
  • 26
    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
  • 8
    @animuson The flag has a unicorn! Try doing THAT with inline code blocks! – Manishearth May 9 '12 at 7:55

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.

  • 20
    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
  • 3
    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
  • 1
    The top two look like a Scratch program when you try to do anything clever! – hat Dec 29 '17 at 7:47

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

Caps Lock

with

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.

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.

  • 15
    cough – Ullallulloo May 9 '12 at 18:39
  • 2
    @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
  • @animuson I'm still waiting. – ItamarG3 May 24 at 14:09

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

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 

                                                           

  • 2
    I give up. Which is it? – Carson Myers Aug 5 '09 at 22:44
  • 7
  • 6
    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
  • 4
    @Tim: there's also a [restore] key; I've never seen that on another system. – Marcel Korpel Dec 3 '10 at 21:44
  • Commodore 64! :D -- too bad we can't include the symbols that go on the sides of the keys. – BrainSlugs83 May 17 '17 at 0:04
  • Commodore 64, sponsored by Retrocomputing. shameless-advertising – wizzwizz4 Oct 28 '17 at 19:02
  • @TimPost Could have been VIC-20, I don't think keyboards were different. Also... function keys give it away? Sure, they were pretty distinctive... but how about the C= key? :D – Amadan Oct 29 at 10:41

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

  • 31
    Now it looks like Messages on the iPhone... – Cody Gray May 9 '12 at 8:09

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

           ↑  

  ←  ↓   →  

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

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)

  • 8
    Just a little ;) – J Atkin Jan 16 '16 at 19:52
  • 1
    That's pretty cool. – BrainSlugs83 May 17 '17 at 0:07
          I 

       am ok

     w  i t  h 

  t   h   i   s  

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

Ctrl + End + Del + S + O + F8

  • 21
    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
  • 11
    -1: I tried that, and a million "Save As" windows appeared. – Abhimanyu Pallavi Sudhir Nov 10 '13 at 9:07
  • 2
    @Dimension1n0 Serves you right for trying to delete the Stack Exchange flagship site! >:-( – wizzwizz4 Oct 28 '17 at 19:04

If you have an older Mac keyboard (just for , 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⏏︎
= / 
89 - 
56
23   
0         . 

You must log in to answer this question.

protected by Shadow Wizard Sep 1 '16 at 22:03

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

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