Comments on: CSS Webkit Appearance

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.

By: Denis

Denis — Wed, 20 Apr 2011 05:09:24 +0000

Thanks for figuring that out. Pretty clean fix. I’m trying to get rid of the arrow in the select option fields in Firefox but -moz-appearance: none doesn’t seem to work. Any suggestions for that?

Regards,
Denis

By: NexusStudioNet

NexusStudioNet — Fri, 28 Jan 2011 19:51:49 +0000

@ David Quinn Carder
Thanks, man !
This drove me nuts !!!!
You made my day. :D