You are here

Styling the <kbd> tag using CSS

Submitted by Druss on Sun, 2014-08-03 10:35

The <kbd> tag is an HTML tag use to indicate keyboard input. Adding the following to your CSS file will provide a rich effect to its display:

kbd
{
    -moz-border-radius:3px;
    -moz-box-shadow:0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;
    -webkit-border-radius:3px;
    -webkit-box-shadow:0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;
    background-color:#f7f7f7;
    border:1px solid #ccc;
    border-radius:3px;
    box-shadow:0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;
    color:#333;
    display:inline-block;
    font-family:Arial,Helvetica,sans-serif;
    font-size:11px;
    line-height:1.4;
    margin:0 .1em;
    padding:.1em .6em;
    text-shadow:0 1px 0 #fff;
}

This will style the SHIFT key as Shift.