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

Recent Features

  • 5 Awesome New Mozilla Technologies You&#8217;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 my colleagues are and how much...

  • CSS vs. JS Animation: Which is Faster?

    How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps? This article serves as a point-by-point...

Incredible Demos

  • Add Controls to the PHP Calendar

    I showed you how to create a PHP calendar last week. The post was very popular so I wanted to follow it up with another post about how you can add controls to the calendar. After all, you don't want your...

  • iPhone Click Effect Using MooTools or jQuery

    One thing I love about love about Safari on the iPhone is that Safari provides a darkened background effect when you click a link. It's the most subtle of details but just enforces than an action is taking place. So why not implement 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

  • OSCON Portland:  Conference  Discount!

    O'Reilly puts on the best web industry conferences in the world.  These conferences include Fluent Conference, Velocity Conference, and the upcoming OSCON in Portland, Oregon from July 20-24.  Open Source Convention (OSCON) is a conference that focuses specifically on open source developers and the tools and possibilities...

  • Follow Redirects with cURL

    I love playing around with cURL. There's something about loading websites via command line that makes me feel like some type of smug hacker, just like tweeting from command line does. I recently cURL'd the Google homepage and saw the following: I found it weird that Google...

  • Developers Have WordPress, Amateurs Have Squarespace, Professional Designers Have the NEW Webydo!

    Web design platforms have traditionally come in one of two varieties. There are the solutions like WordPress and Drupal that are incredibly powerful, but an understanding of web development and coding is required to be able to use those platforms effectively. On the other side of the...

  • Chris Coyierâs Favorite CodePen Demos II

    Hey everyone! Before we get started, I just want to say it’s damn hard to pick this few favorites on CodePen. Not because, as a co-founder of CodePen, I feel like a dad picking which kid he likes best (RUDE). But because there is just so...

  • GSAP + SVG For Power Users: Motion Along A Path

    Now that the GreenSock API is picking up steam, there are many tutorials and Getting Started guides out there to provide good introductions to the library, not to mention GreenSock’s own Forum and Documentation. This article isn’t intended for beginners, but rather a...