Comments on: CSS Webkit Appearance

By: gray ghost visuals

gray ghost visuals — Sat, 28 Apr 2012 01:37:24 +0000

Dang it all! After a few hours sifting through chromium issues, messing around on jsfiddle with a slimmed down test case, reading google search results I finally get a link from a comment reply on csstricks.com leading me here for the solution. Boy are my arms tired. WACKAH, WACKAH!

Seriously though, I’m trying to wrap my head around the thinking here. Certainly consistency across the board is a factor and if that were the case Mozilla would be the same as well -but they’re not! Maybe its time we decide whats the best options for for input styling.

Thanks for the great tips and research into Safari’s CSS reference on this daunting and delightful subject :)p

By: Sridevi

Sridevi — Mon, 23 Apr 2012 20:18:13 +0000

Thanks for suggesting the quick fix. It helped me a lot.

By: ilithya

ilithya — Mon, 05 Dec 2011 15:00:46 +0000

Hello,

Thanks for the tip! But like RAYMOND SCHWARTZ mentioned.

For me it wasn’t enough with the webkit-appearence:none
to get rid of the round corners in buttons and fields in iPad. That only worked in my computer’s Safari browser.

I had to apply -webkit-border-radius: 0px;
for the iPad issue, and that worked as a charmed :)

// Happy coding everyone!

By: OLDSKULL

OLDSKULL — Mon, 31 Oct 2011 15:30:36 +0000

Thanks, great tip!

By: tim

tim — Wed, 17 Aug 2011 16:32:55 +0000

Thanks. Fixed my readonly input issue where I wanted no border, just the text.

By: Raymond Schwartz

Raymond Schwartz — Mon, 15 Aug 2011 20:12:58 +0000

Hey. Great tip. I wanted to mention that rounded corners still show up in iPad with -webkit-appearence:none. Your use of -webkit-border-radius: 0px; solves that problem. Tip - no need for units if the number is 0.

By: Daniel

Daniel — Thu, 23 Jun 2011 05:24:55 +0000

Seems like if we could disable the thing altogether, instead of having to redefine it... Webkit is nice, if you’re in a hurry. But it looks like crap, to be honest. If you want conformity in a set of buttons, why not at least make them look good?? I can’t stand the look of the standard button set, so always end up changing it. Always. So then I have to track down all my: input[type=“button”] or whatever. Why am I fighting my browser? Ok, I’m a little crabby right now... hate wasting my afternoons tracking these things down. Need to write my own webkit tool box or something.

By: James

James — Wed, 01 Jun 2011 20:22:47 +0000

Sweet !!! Blasted phantom “border” looking thing on input field has been killing me for months and this did the trick. Thanks a ton.

By: Alex

Alex — Fri, 20 May 2011 01:27:26 +0000

Beautiful. Thanks for the solution, works like a charm.

By: Tom McCabe

Tom McCabe — Fri, 13 May 2011 23:23:34 +0000

Another one to watch out for is -webkit-text-size-adjust. The iPhone browser automatically sizes up text for readability, but on a fixed width site it can give you all sorts of blowouts.