Separate out :not() selectors from CSS 2.1 selectors.

IE8 won't execute the CSS block if it contains a CSS3 selector.
This makes IE8 still execute the CSS, and CSS3-compliant browsers
can support the `:not()`.
This commit is contained in:
Tilo Mitra 2014-02-06 01:34:06 -05:00
parent a6a38caa4f
commit b4755b0bd3

View File

@ -1,4 +1,3 @@
.pure-form input:not([type]),
.pure-form input[type="text"],
.pure-form input[type="password"],
.pure-form input[type="email"],
@ -26,7 +25,22 @@
box-sizing: border-box;
}
.pure-form input:not([type]):focus,
/*
Need to separate out the :not() selector from the rest of the CSS 2.1 selectors since IE8 won't execute CSS that contains a CSS3 selector.
*/
.pure-form input:not([type]) {
padding: 0.5em 0.6em;
display: inline-block;
border: 1px solid #ccc;
font-size: 0.8em;
box-shadow: inset 0 1px 3px #ddd;
border-radius: 4px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.pure-form input[type="text"]:focus,
.pure-form input[type="password"]:focus,
.pure-form input[type="email"]:focus,
@ -42,7 +56,17 @@
.pure-form input[type="tel"]:focus,
.pure-form input[type="color"]:focus,
.pure-form select:focus,
.pure-form textarea:focus {
.pure-form textarea:focus
{
outline: 0;
outline: thin dotted \9; /* IE6-9 */
border-color: #129FEA;
}
/*
Need to separate out the :not() selector from the rest of the CSS 2.1 selectors since IE8 won't execute CSS that contains a CSS3 selector.
*/
.pure-form input:not([type]):focus {
outline: 0;
outline: thin dotted \9; /* IE6-9 */
border-color: #129FEA;
@ -59,7 +83,7 @@
margin: 0.5em 0;
display: block;
}
.pure-form input:not([type])[disabled],
.pure-form input[type="text"][disabled],
.pure-form input[type="password"][disabled],
.pure-form input[type="email"][disabled],
@ -80,6 +104,15 @@
background-color: #eaeded;
color: #cad2d3;
}
/*
Need to separate out the :not() selector from the rest of the CSS 2.1 selectors since IE8 won't execute CSS that contains a CSS3 selector.
*/
.pure-form input:not([type])[disabled] {
cursor: not-allowed;
background-color: #eaeded;
color: #cad2d3;
}
.pure-form input[readonly],
.pure-form select[readonly],
.pure-form textarea[readonly] {
@ -130,7 +163,6 @@
border-bottom: 1px solid #e5e5e5;
}
.pure-form-stacked input:not([type]),
.pure-form-stacked input[type="text"],
.pure-form-stacked input[type="password"],
.pure-form-stacked input[type="email"],
@ -152,6 +184,13 @@
margin: 0.25em 0;
}
/*
Need to separate out the :not() selector from the rest of the CSS 2.1 selectors since IE8 won't execute CSS that contains a CSS3 selector.
*/
.pure-form-stacked input:not([type]) {
display: block;
margin: 0.25em 0;
}
.pure-form-aligned input,
.pure-form-aligned textarea,
.pure-form-aligned select,