WebKit-Specific Style: -webkit-appearance

By  on  

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

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

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

  • By
    LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

  • By
    An Interview with Eric Meyer

    Your early CSS books were instrumental in pushing my love for front end technologies. What was it about CSS that you fell in love with and drove you to write about it? At first blush, it was the simplicity of it as compared to the table-and-spacer...

Incredible Demos

  • By
    MooTools Clipboard Plugin

    The ability to place content into a user's clipboard can be extremely convenient for the user. Instead of clicking and dragging down what could be a lengthy document, the user can copy the contents of a specific area by a single click of a mouse.

  • By
    PHP / MooTools 1.2 Accordion Helper

    The MooTools Accordion plugin seems to be the plugin that people seem to have the most problems with. It's an awesome plugin, so I can see why so many people want to use it, but I think that may be part of the problem.

Discussion

  1. David

    i believe that some value not apply to span, example, menulist apply to select tag

  2. @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. 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. 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. @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. 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. @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/ .

  13. According to Moz://a themself:

    The -moz-appearance CSS property is used in Gecko (Firefox) to display an element using platform-native styling based on the operating system’s theme.

    So the concept is to ‘adjust’ to the device’s OS you are using. Not very practical at all and I was looking for a Reddit thread to spurge my disdain of how awful this “experimental technology”—as Moz says—really is. Every website that uses themes or assets to _support_, and thus promoting, the rule needs this here snippet

    input {-moz-appearance: initial; border: inherit; }

    so the page doesnt show thos obnoxious quadruple checkboxes and other disastrous inputs.

    I am going with thums down on this ideology, at least for now. Moz://a is usually pretty good with creating new but this one I am not too sure about.

    • My apologies for being knee-jerk on the above comment. The article from David, above, is obviously for Webkit -appearence style. Oh well, not enough coffee for me yet.

      Hopefully it will draw some interest as a cross technology comment, if nothing else.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!