Update form resetting for better iOS support

This commit is contained in:
Nicolas Cusan
2019-07-11 18:09:01 +02:00
parent 4d94f51fde
commit aa8a8426c8

View File

@@ -1,4 +1,4 @@
/*! de-style.css v1.0.5 | MIT License | https://github.com/nicolas-cusan/destyle.css */ /*! de-style.css v1.0.6 | MIT License | https://github.com/nicolas-cusan/destyle.css */
/* Reset box-model /* Reset box-model
========================================================================== */ ========================================================================== */
@@ -225,11 +225,18 @@ iframe {
/* Forms /* Forms
========================================================================== */ ========================================================================== */
/**
* Reset form fields to make them styleable
* 1. Reset radio and checkbox to preserve their look in iOS.
*/
button, button,
input, input,
optgroup, optgroup,
select, select,
textarea { textarea {
-webkit-appearance: none;
appearance: none;
vertical-align: middle; vertical-align: middle;
color: inherit; color: inherit;
font: inherit; font: inherit;
@@ -238,16 +245,19 @@ textarea {
padding: 0; padding: 0;
margin: 0; margin: 0;
outline: 0; outline: 0;
border-radius: 0;
} }
/** [type='checkbox'] {
* Remove all Style fro select elements. Does not quite work cross-browser /* 1 */
*/ -webkit-appearance: checkbox;
appearance: checkbox;
}
select { [type='radio'] {
-webkit-appearance: none; /* 1 */
appearance: none; -webkit-appearance: radio;
border-radius: 0; appearance: radio;
} }
/** /**
@@ -358,14 +368,12 @@ textarea {
} }
/** /**
* 1. Add the correct box sizing in IE 10. * 1. Remove the padding in IE 10.
* 2. Remove the padding in IE 10.
*/ */
[type='checkbox'], [type='checkbox'],
[type='radio'] { [type='radio'] {
box-sizing: border-box; /* 1 */ padding: 0; /* 1 */
padding: 0; /* 2 */
} }
/** /**
@@ -378,13 +386,11 @@ textarea {
} }
/** /**
* 1. Correct the odd appearance in Chrome and Safari. * 1. Correct the outline style in Safari.
* 2. Correct the outline style in Safari.
*/ */
[type='search'] { [type='search'] {
-webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 1 */
outline-offset: -2px; /* 2 */
} }
/** /**