removing border radius on form elements added by iOS Safari

[ratherblue]

I noticed on my iPhone that form elements have a border radius added to them and thought it would be useful in normalize.

[fleeting]

Might check out #260, #244, and #178.

[ratherblue]

Well, this is awkward. Next time I'll search the previous pull requests. Sorry for the repeated commit.

I do think it should be in normalize, though, since things like this exist:

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

Isn't the purpose of normalize to gently ensure default base styling across all the browsers? Since the user didn't explicitly state they wanted rounded corners and by default all the other browsers don't add that style.

I don't see where input buttons are losing too much styling by only removing the border radius.

[fleeting]

I don't believe border-radius: 0; alone will fix it though.

On Wednesday, February 19, 2014, edendramis notifications@github.com
wrote:

Well, this is awkward. Next time I'll search the previous pull requests.
Sorry for the repeated commit.

I do think it should be in normalize, though, since things like this exist:

/**

• Define consistent border, margin, and padding. */

fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}

Isn't the purpose of normalize to gently ensure default base styling
across all the browsers? Since the user didn't explicitly state they wanted
rounded corners and by default all the other browsers don't add that style.

I don't see where input buttons are losing too much styling by only
removing the border radius.

Reply to this email directly or view it on GitHubhttps://github.com//pull/306#issuecomment-35559607
.

James Fleeting
E: hello@jamesfleeting.com
T: @twofivethreetwo http://twitter.com/twofivethreetwo
W: http://jamesfleeting.com
B: http://iwasasuperhero.com

[ratherblue]

It fixes it for input, select, textarea, just not buttons

[marcop135]

to remove border-radius you have to destroy entire apperance adding '-webkit-appearance: none' http://jsbin.com/pupom/3/edit

[ratherblue]

You can remove the border radius from input, select, textarea with border-radius: 0.

I know that the only way to fix buttons is -webkit-appearance: none.

[dominikwilkowski]

👍 for a -webkit-appearance: none and whatever else is needed on the relevant elements