WebKit-Specific Style: -webkit-appearance

Discussion

1. David

   i believe that some value not apply to span, example, menulist apply to select tag
2. David Walsh

   @David: Of course not, but it’s funny that it can be done. ;)
3. 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?
4. 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?
5. 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)
6. 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
7. Tymon Sturgeon

   @David Walsh: Just a quick hint: This is can be used for custom checkboxes in -webkit… :D
8. 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.
9. thebadteen

   @David Walsh: How can i get webkit working in firefox and ie?
10. 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???
11. K

    Work on mobile for iphone/ipad … you’ll find uses a-plenty for -webkit-appearance
12. 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/ .