WebKit-Specific Style: -webkit-appearance

By David Walsh on June 29, 2010

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

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

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

The CSS

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

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

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

Recent Features

Create a CSS Flipping Animation
You've all asked for it and now I've added it: Internet Explorer support! Annoyingly enough, the change involves rotate the front and back elements instead of just the container. Skip to this section if you'd like the...
5 Awesome New Mozilla Technologies You’ve Never Heard Of
My trip to Mozilla Summit 2013 was incredible. I've spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out. MozSummit provided the perfect reminder of how brilliant...
Create a CSS Cube
CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals. Add animation and you've got something really neat. Unfortunately each CSS cube...

Incredible Demos

jQuery Link Nudge Plugin
A while back I debuted a tasteful mouseover/mouseout technique called link nudging. It started with a MooTools version and shortly thereafter a jQuery version. Just recently Drew Douglass premiered a jQuery plugin that aimed at...
Multiple Background CSS Animations
CSS background animation has been a hot topic for a long time, mostly because they look pretty sweet and don't require additional elements. I was recently asked if it was possible to have multiple background animations on a given...
Create a Brilliant Sprited, CSS-Powered Firefox Animation
Mozilla recently formally announced Firefox OS and its partners at Mobile World Congress and I couldn't be more excited. Firefox OS is going to change the lives of people in developing countries, hopefully making a name for itself...

Discussion

David
i believe that some value not apply to span, example, menulist apply to select tag
David Walsh
@David: Of course not, but it’s funny that it can be done. ;)
Christopher Smoak
Where do you see a need for this? Why would someone want to display an element as a checkbox or selectbox or whatever?
Chris Radford
I have seen -webkit-appearance: caret; used to remove the drop-shadows inside input types of text, email search etc on the iPad.

Other than that it seems a fairly un-useful set of rules. Amusing that they work on the span though, maybe it’d be useful for JavaScript functionality somehow?
penelope glamour
In Opera10, Firefox 3.6.6 and IE8 dont work, in Chrome5 yes but menulist dont show the arrow, it is only ok in Safari, so , I think it’s no very useful (but yes, few funny)
anujv73
@penelope glamour: its a webkit style tag it gone only support webkit browser, currently only safari and chrome are webkit browser , for firefox there is -moz-appearance and for opera ie there is appearance style tag and i hope they all have same amount of option available
Tymon Sturgeon
@David Walsh: Just a quick hint: This is can be used for custom checkboxes in -webkit… :D
RussellUresti
Yeah, this thing acts as the gatekeeper for input styles — especially on the iPhone. I couldn’t get a box-shadow to apply to an input type=text, so I just set the -webkit-appearance to default-button, and boom, it worked. Same with checkboxes and radio buttons, couldn’t get custom styles like border-radius and background-gradients going, but set the type to default-button and the sky is the limit.

There’s also a -moz-appearance, but it doesn’t work nearly as well.

An important thing to keep in mind is that the :checked look for checkboxes and radios is also controlled by -webkit-appearance. When you set them to default-button, if you don’t set them back to their respective defaults (or apply your own :checked psuedo-class styles), they won’t show up as being checked.
thebadteen
@David Walsh: How can i get webkit working in firefox and ie?
Danz
@RussellUresti: Curious, i cannot seem to get -moz-appearance to in any shape or form, it seems to retain whatever the element is… or is this only as -webkit-appearance can be used on spans and divs, can only be used other than form elements???
K
Work on mobile for iphone/ipad … you’ll find uses a-plenty for -webkit-appearance
Victor
When applying -webkit-appearance: button to an <a>, style of its button-like border cannot be overridden with CSS anymore. With CSS
```
.button {
  -webkit-appearance: button;
  border: solid 1px #bbb;
  background-color: #888;
  color: #000;
}
```
button.button and a.button will look different: http://jsfiddle.net/ys4CX/1/ .