CSS Webkit Appearance
I did my fair share of testing this site on an iPad during development. In most cases, the version of Mobile Safari found on the iPad renders pages like any other standards-based browser. Only when I got to native UI elements like search boxes & text fields did I notice an inconsistency. A pre-set styling was being applied in the way of an inner shadow to text input fields and a gradient overlay to search / submit buttons, which also got rounded corners.
After picking through Safari’s CSS Reference I found -webkit-appearance, which changes the appearance of buttons & controls to resemble a native apple UI. I added this code for comment & search forms to retain the basic style I defined in my CSS: -webkit-appearance:none;
There are quite a few parameters for this property that you may want to take advantage of and/or watch out for. Also, If you simply wanted to disable inner-shadows of input fields you could just use -webkit-appearance:caret;.
- button
- button-bevel
- caret
- checkbox
- default-button
- listbox
- listitem
- media-fullscreen-button
- media-mute-button
- media-play-button
- media-seek-back-button
- media-seek-forward-button
- media-slider
- media-sliderthumb
- menulist
- menulist-button
- menulist-text
- menulist-textfield
- none
- push-button
- radio
- searchfield
- searchfield-cancel-button
- searchfield-decoration
- searchfield-results-button
- searchfield-results-decoration
- slider-horizontal
- slider-vertical
- sliderthumb-horizontal
- sliderthumb-vertical
- square-button
- textarea
- textfield
17 Responses.
Interesting! Just fixed this on my new site :) Cheers!
I did not know that! Thanks. :)
Thanks for the great info, Trent. I have implemented this on my blog today, as this is something that has bugged me about the iPhone browser.
The more you know. Thank you.
That’s awesome! Does it get rid of extra paddings and outlines too?
Do you know if there’s any similar solution for Mozilla browsers?
For Mozilla browsers, to get rid of that awful blue outline on links (for example, if an image is used as a link), add border-style: none to your CSS. Here’s an example of how I handled it from my site: img { border-style: none; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; }
I’m sure though, that there are other (maybe better) ways to do it. :-)
For a button, you may also want to make the outline: 0px.
Example:
HTML –>
CSS –>
#search #submit {border: 1px solid rgb(88,129,170); background-color: rgb(88,129,170); outline: 0px; padding: 5px 10px; color: rgb(255,255,255); border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; font-family: ‘HelveticaNeue-Light’, ‘Helvetica Neue Light’, ‘Helvetica Neue’, ‘Helvetica’, ‘Arial’, sans-serif; cursor: pointer; font-size: 12px; text-shadow: 0px 1px 1px rgb(22,22,25); box-shadow: 2px 3px 3px rgb(22,22,25); -moz-box-shadow: 2px 3px 3px rgb(22,22,25); -webkit-box-shadow: 2px 3px 3px rgb(22,22,25); font-weight: bold; margin-left: 5px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-appearance:none; }
@Steve: I was talking about browser-specific proprietary styles for form elements. For instance, in Firefox, buttons and submit inputs have a “inner outline” when focused and extra padding even if you reset outline and padding for the element, pretty much like Safari forces a default style that matches the aqua theme.
I’m looking for an easy way to reset all these browser-specific proprietary styles in Firefox just like the -webkit-appearance selector does.
Well, I just found out that there actually is a -moz-appearance selector that does exactly the same. Now I’m good to go! ;)
Source: https://developer.mozilla.org/en/CSS/-moz-appearance
@Rafael: I see what you were asking about now. My bad on that. Thanks for the link. Very informative.
I’m having a strange problem with . When viewing my page on Windows Safari, I see the [X] (searchfield-cancel-button), it works as expected. However when I view the same page on the iPhone, Mobile Safari, the [X] button is not there. If I add more margin-right to ‘input[type="search"]::-webkit-search-cancel-button’ I can tap the invisible button to get the expected functionality.
Any suggestions?
When I use the “caret” value, it does get rid of the inner shadow and looks perfect on the iPad… but on the desktop versions of Chrome and Safari, my textarea/input borders are gone.
On the other hand, if I use the “none” value, on the iPad it no longer applies my focus (pseudo-class) styles when a textarea/input is selected. It kind of ruins my form styling because textareas/inputs not in focus are significantly subdued.
Is there a way to get rid of the inner shadow without breaking the focus pseudo-class? I know I can have a separate stylesheet for the iPhone and the iPad, but I’d like to keep things simple(r) if possible!
I found a temporary solution: http://stackoverflow.com/questions/2839618/iphone-web-app-typetext-inner-shadow-issue
It works. : )
@David Quinn Carder: So that worked for you? Thanks for following up!
.textBox input { border:none;}@Trent:
I didn’t make it clear with my link (sorry), but the solution that worked for me was this:
input, textarea { background:url(transparent.gif); }
It’s the only fix that worked across all browsers without breaking :focus on the iPhone/iPad—and to clarify, it did not simply override my :focus style, it disabled the :focus function altogether, which is obviously a usability concern.
I love the look of this site, by the way!
man i have been racking my brain about this one, thanks!
Here’s the editor draft spec where appearance is defined:
http://dev.w3.org/csswg/css3-ui/#appearance