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

Demonstration of above CSS

Sadly, it breaks Pesto's castle.

4

OUR PRINCESS IS IN ANOTHER CASTLE!


original keyboard castle

27


 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

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)

alt text

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)

rendered 20-11-2012

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

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

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?


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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.