WebKit-Specific Style: -webkit-appearance

I was recently scoping out the horrid source code of the Google homepage when I noticed the "Google Search" and "I’m Feeling Lucky" buttons had a style definition I hadn’t seen before:  -webkit-appearance.  The value assigned to the style was "push-button."  They are buttons so that makes sense but I was curious as to the possible values available for that style.  What I found was that there are a *ton* and that you can set any HTML element to look like a completely different element.

View Demo

Possible -webkit-appearance Values

  • checkbox
  • radio
  • push-button
  • square-button
  • button
  • button-bevel
  • listbox
  • listitem
  • menulist
  • menulist-button
  • menulist-text
  • menulist-textfield
  • scrollbarbutton-up
  • scrollbarbutton-down
  • scrollbarbutton-left
  • scrollbarbutton-right
  • scrollbartrack-horizontal
  • scrollbartrack-vertical
  • scrollbarthumb-horizontal
  • scrollbarthumb-vertical
  • scrollbargripper-horizontal
  • scrollbargripper-vertical
  • slider-horizontal
  • slider-vertical
  • sliderthumb-horizontal
  • sliderthumb-vertical
  • caret
  • searchfield
  • searchfield-decoration
  • searchfield-results-decoration
  • searchfield-results-button
  • searchfield-cancel-button
  • textfield
  • textarea

The HTML

copy<span class="webkit-me">My Span Tag</span>

Just a SPAN tag, right?  We’ll see about that.

The CSS

copy.webkit-me { -webkit-appearance:push-button; }

Now my span looks like a button.  Weird, huh?  It can get worse:

copy.webkit-me { -webkit-appearance:checkbox; }

That’s right…my SPAN tag now looks like checkbox.  Weird.

View Demo

Be sure to check out my demo — I’ve got each -webkit-appearance setting represented.  Some elements show no change but some look downright odd!

Leave a comment