Styling <kbd> with CSS

Nov 10 2018

I saw this on Stack Overflow the other day:

Killer KBD Styling

I thought it was well-done styling, so naturally, I popped open Firefox Web Developer tools and snatched the CSS up. Here it is:.

kbd {
  display: inline-block;
  margin: 0 .1em;
  padding: .1em .6em;
  font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
  font-size: 11px;
  line-height: 1.4;
  color: #242729;
  text-shadow: 0 1px 0 #FFF;
  background-color: #e1e3e5;
  border: 1px solid #adb3b9;
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(12,13,14,0.2),0 0 0 2px #FFF inset;
  white-space: nowrap;
}

Now, I can say press F5 to refresh the page, or that I have remapped Caps Lock to Ctrl. Pretty neat, eh?

  1. newer: My tmux Cheat Sheet
  2. older: Docker, on macOS, DIY-Style
James Hunt (the avatar)

James works on the Internet, spends his weekends developing new and interesting bits of software and his nights trying to make sense of research papers.

Currently exploring just how much data you can shove though DuckDB before it explodes.