This option will reset the home page of this site. Restoring any closed widgets or categories.

Reset
Home > Web Development > PHP > WebKit-Specific Style: -webkit-appearance

WebKit-Specific Style: -webkit-appearance

Tagged with:     

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.

class="actions"> href="http://davidwalsh.name/dw-content/webkit-styles.php" class="demo">View Demo class="clear">

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.

class="actions"> href="http://davidwalsh.name/dw-content/webkit-styles.php" class="demo">View Demo class="clear">

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!

Follow Me! href="http://twitter.com/davidwalshblog">Twitter | href="http://www.facebook.com/#!/pages/David-Walsh-Blog/186644584869">Facebook | href="http://www.linkedin.com/in/davidjameswalsh">LinkedIn | href="http://mootools.net/forge/profile/davidwalsh">MooTools Forge.

Full David Walsh Blog Post: href="http://davidwalsh.name/webkit-appearance">WebKit-Specific Style: -webkit-appearance

Related posts:

  1. href='http://davidwalsh.name/rounded-corners-webkit' rel='bookmark' title='Permanent Link: Rounded Corners in Webkit'>Rounded Corners in Webkit
  2. href='http://davidwalsh.name/dojo-twitter' rel='bookmark' title='Permanent Link: Create Twitter-Style Buttons with the Dojo Toolkit'>Create Twitter-Style Buttons with the Dojo Toolkit
  3. href='http://davidwalsh.name/mootools-style-media' rel='bookmark' title='Permanent Link: MooTools: Set Style Per Media'>MooTools: Set Style Per Media
  4. href='http://davidwalsh.name/dojo-browser-styles' rel='bookmark' title='Permanent Link: Browser-Specific Styles with the Dojo Toolkit'>Browser-Specific Styles with the Dojo Toolkit
  5. href='http://davidwalsh.name/github-css' rel='bookmark' title='Permanent Link: Create GitHub-Style Buttons with CSS and jQuery, MooTools, or Dojo JavaScript'>Create GitHub-Style Buttons with CSS and jQuery, MooTools, or Dojo JavaScript

View full post on David Walsh :: PHP, CSS, MooTools, jQuery, and Everything Else

No related posts.

Tagged with:     

4 Comments

  1. David
    Posted on June 30, 2010 at 1:11 am

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

  2. David Walsh
    Posted on June 30, 2010 at 12:24 am

    @David: Of course not, but it’s funny that it can be done. ;)

  3. Christopher Smoak
    Posted on June 29, 2010 at 11:35 pm

    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
    Posted on June 29, 2010 at 11:07 pm

    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?

Advertisement