diff --git a/src/forms/css/forms.css b/src/forms/css/forms.css index 0b65aad..c7e0f0a 100644 --- a/src/forms/css/forms.css +++ b/src/forms/css/forms.css @@ -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,