232

<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
  • 1
    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
  • 287
    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
  • 31
    ok improved, will deploy later Jul 5 '09 at 7:14
  • 2
    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
  • 69
    @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
  • 8
    The kbd graphics are cool in my opinion why get rid of them? 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. Sep 1 '16 at 22:04
  • 1
    @Ephraim it appears to work just fine now, at least in preview 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

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

4
  • +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
788

                                                                                                               
                                                                                           
                                                                                           
                                                                                            
                                                                                            
                                                                                            
                                                                                                                               
                                                                                                  
                                                                                                        
                                                                                                  
                                                                                                          
                                                                                                      
                                                                                                              
                                                                                                  
                                                                                                              
                                                                                                  
                                                                                                              

OUR PRINCESS IS IN ANOTHER CASTLE!


original keyboard castle

26
  • 369
    You've just beaten the internet.
    – Eric
    Jul 2 '09 at 21:03
  • 8
    I just had a flashback to elementary school and NES-filled nights.. so awesome! 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. Jul 5 '09 at 15:51
  • 79
    Slow work day, wasn't it?
    – perbert
    Jul 28 '09 at 17:01
  • 5
    Did you use a script for this? Or all by hand...
    – Zifre
    Jul 28 '09 at 18:42
  • 84
    A true artiste does it all by hand, though there may have been some cut-and-paste. Jul 28 '09 at 18:50
  • 46
    Despite being empty of princess, this castle is full of win.
    – matpie
    Aug 5 '09 at 22:49
  • 36
    Oh noes! Now the castle is in another castle!
    – random
    Sep 26 '09 at 5:49
  • 2
    I rolled it back now that the <kbd> element is back! Nov 22 '10 at 1:45
  • @George, but it looks different?
    – Arjan
    Nov 27 '10 at 22:54
  • @Arjan: Not my fault :P 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! 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
  • 21
    Uh oh. I think the castle is now slightly lopsided. Unexpected geological activity!
    – nhinkle
    May 5 '12 at 1:16
358


 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.


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

11
  • 18
    +1 for the completion of what I tried to do...but also +1 because trying was also the most fun I've had...although... Jul 2 '09 at 19:46
  • 3
    Try and change it to the Billy Mays button
    – TheTXI
    Jul 2 '09 at 19:53
  • 11
    Hey, where's the spacebar?
    – fretje
    Jul 2 '09 at 20:25
  • 268
    Whoneedsaspacebar?
    – mmyers
    Jul 2 '09 at 20:27
  • 2
    You made me laugh man. Thanks xD Jul 2 '09 at 23:45
  • 26
    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. 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
  • 1
    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. May 3 '18 at 7:52
158

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

13
  • 15
    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) 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. Jul 2 '09 at 20:33
  • Ok wow, well im on linux so the font difference is a possible culprit. 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 Mod
    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 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? Jul 5 '09 at 12:04
  • Opera v9.64: the right Ctrl key is sticking out to the right. Aug 5 '09 at 23:30
  • @Peter it no longer looks as intended. Check out Jeffs image here in the comments. 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
  • The design of <kbd> element has probably changed more than 2 times already, but I like the current keyboard more. It's not bad, just more modern.
    – EvgenKo423
    Jul 28 '19 at 9:53
157

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

Although I will present this:

Any

The mystical Any key.

0
154

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
  • 23
    I thought we couldn't have nice things because of me. But I guess it was you all along. Jul 2 '09 at 19:25
  • 11
    Shouldn't the T be a Shift+t?
    – BalusC
    Jul 1 '12 at 19:48
  • 16
    @Chichiray FREE COUNTRY I DO WHAT I WANT Jul 5 '12 at 21:48
  • 17
    IN UR POST USIN MY FREEDOMS
    – badp
    Oct 25 '12 at 21:02
  • 8
    @badp: Because that really needed to be fixed.
    – user102937
    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
124

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

4
  • Best one yet. I am in awe. Nov 20 '12 at 4:15
  • 48
    I'm horrified at the amount of time you must have spent on building this! ;) 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.
    – byxor
    May 1 '17 at 11:06
122

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!

5
  • 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. ;-) May 7 '12 at 10:46
  • 28
    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 May 8 '12 at 5:19
  • 8
    @animuson The flag has a unicorn! Try doing THAT with inline code blocks! May 9 '12 at 7:55
105

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.

3
  • 22
    Wow it's even worse than backticks... hope it won't become the new formatting trend any time soon! Feb 9 '14 at 21:48
  • 4
    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
  • 9
    The top two look like a Scratch program when you try to do anything clever!
    – hat
    Dec 29 '17 at 7:47
74

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
  • 16
    cough 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 StaffMod
    May 9 '12 at 19:05
  • 1
    @animuson I'm still waiting.
    – ItamarG3
    May 24 '18 at 14:09
72

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.

4
  • 11
    Seconded. Now only to get PC makers to get on this. Jul 2 '09 at 19:37
  • 27
    MAY HE REST IN PEACE!!! Jul 2 '09 at 20:08
  • 5
    Was he similar to BRIAN BLESSED?
    – TRiG
    Aug 6 '11 at 1:29
  • RELATED!
    – 3D1T0R
    Jun 22 '18 at 3:12
71

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

51

BA

2
  • 6
    +1 for an actual legitimate usage of <kbd> (plausibly on gaming.SE). Jun 30 '16 at 3:18
  • 10
    Where's start?
    – byxor
    May 1 '17 at 11:09
45

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
  • 3
    I give up. Which is it? Aug 5 '09 at 22:44
  • 8
  • 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
  • 5
    @Tim: there's also a [restore] key; I've never seen that on another system. 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. May 17 '17 at 0:04
  • Commodore 64, sponsored by Retrocomputing. shameless-advertising
    – wizzwizz4
    Oct 28 '17 at 19:02
  • 2
    @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 '18 at 10:41
39

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
  • 39
    Now it looks like Messages on the iPhone...
    – Cody Gray
    May 9 '12 at 8:09
35

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

           ↑  

  ←  ↓   →  

2
  • 45
    If only that were an actual key on my keyboard...
    – Eric
    Jul 2 '09 at 19:20
  • 6
    +1 for echoing my thought exactly!
    – Kip
    Jul 2 '09 at 20:01
34

Am I late?


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

~` !1@2 #3$4 %5^6 &7*8 (9)0 _-+=                 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)

4
  • 10
    Just a little ;)
    – J Atkin
    Jan 16 '16 at 19:52
  • 3
    That's pretty cool. May 17 '17 at 0:07
  • 2
    The 0 key is, um, messed up... Jun 17 '20 at 16:21
  • @mindstormsboi fixed Dec 10 '20 at 18:17
23
          I 

       am ok

     w  i t  h 

  t   h   i   s  

21

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

Ctrl + End + Del + S + O + F8

2
  • 26
    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
  • 2
    @Dimension1n0 Serves you right for trying to delete the Stack Exchange flagship site! >:-(
    – wizzwizz4
    Oct 28 '17 at 19:04
3

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         . 

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