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