O'Reilly

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!

Track.js Error Reporting

Upcoming Events

Recent Features

  • How I Stopped WordPress Comment Spam

    I love almost every part of being a tech blogger:  learning, preaching, bantering, researching.  The one part about blogging that I absolutely loathe:  dealing with SPAM comments.  For the past two years, my blog has registered 8,000+ SPAM comments per day.  PER DAY.  Bloating my database...

  • Send Text Messages with PHP

    Kids these days, I tell ya.  All they care about is the technology.  The video games.  The bottled water.  Oh, and the texting, always the texting.  Back in my day, all we had was...OK, I had all of these things too.  But I still don't get...

Incredible Demos

  • Font Replacement Using Cufón

    We all know about the big font replacement methods. sIFR's big. Image font replacement has gained some steam. Not too many people know about a great project named Cufón though. Cufón uses a unique blend of a proprietary font generator tool...

  • 9 Mind-Blowing Canvas Demos

    The <canvas> element has been a revelation for the visual experts among our ranks.  Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead.  Here are nine unbelievable canvas demos that...

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

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

Recently on David Walsh Blog

  • Free Download: Font Bundle Featuring 17 Incredible Typefaces

    The only thing we love more than a good font, is a good free font. So we’ve combed the Web for some of our favorite free fonts, and gathered them here in a single download. You’ll find a variety of useful typefaces, from highly geometric designs...

  • OâReilly Velocity Conference â Amsterdam

    My favorite front-end conference has always been O'Reilly's Velocity Conference because the conference series has focused on one of the most undervalued parts of client side coding:  speed.  So often we're so excited that our JavaScript works that we forget that speed, efficiency, and performance are just as important. The next Velocity...

  • CanIUse Command Line

    Every front-end developer should be well acquainted with CanIUse, the website that lets you view browser support for browser features.  When people criticize my blog posts for not detailing browser support for features within the post, I tell them to check CanIUse:  always up to date, unlike...

  • Generating Alternative Stylesheets for Browsers Without @media

    If your CSS code is built with a mobile-first approach, it probably contains all the rules that make up the "desktop" view inside @media statements. That's great, but browsers that don't support media queries (IE 8 and below) will simply ignore them, ending up getting the...

  • Serve a Directory with PHP

    Many developers have a giggle at PHP, even looking down at the language, but let's be honest:  most of our blogs are powered by it (WordPress) and it's a great language to dabble around with.  I cut my teeth on PHP, though I prefer to avoid PHP these days. But...