rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases Activity

more required input tweaks

Browse Source
This commit is contained in:
Mark Otto 2012-11-04 19:53:13 -08:00
parent 91bcccd9a8
commit 62c78e46f8
4 changed files with 19 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
docs/assets/css/bootstrap.css vendored
View File

@ -1588,16 +1588,16 @@ input[type="checkbox"][readonly] {
border-color: #3a87ad;
}
input:invalid,
select:invalid,
textarea:invalid {
input:focus:invalid,
textarea:focus:invalid,
select:focus:invalid {
color: #b94a48;
border-color: #ee5f5b;
}
input:invalid:focus,
select:invalid:focus,
textarea:invalid:focus {
input:focus:invalid:focus,
textarea:focus:invalid:focus,
select:focus:invalid:focus {
border-color: #e9322d;
-webkit-box-shadow: 0 0 6px #f8b9b7;
-moz-box-shadow: 0 0 6px #f8b9b7;

8
docs/base-css.html
View File

@ -1571,13 +1571,13 @@ For example, <code><section></code> should be wrapped as inlin
<input class="input-xlarge" id="focusedInput" type="text" value="This is focused...">
</pre>
<h3>Required inputs</h3>
<p>Style inputs via default browser functionality with <code>:valid</code>.</p>
<h3>Invalid inputs</h3>
<p>Style inputs via default browser functionality with <code>:invalid</code>. Specify a <code>type</code> and add the <code>required</code> attribute.</p>
<form class="bs-docs-example form-inline">
<input class="span4" type="text" value="Required input" required>
<input class="span3" type="email" placeholder="test@example.com" required>
</form>
<pre class="prettyprint linenums">
&lt;input class="span4" type="text" placeholder="Required input" required&gt;
&lt;input class="span3" type="email" required&gt;
</pre>
<h3>Disabled inputs</h3>

8
docs/templates/pages/base-css.mustache vendored
View File

@ -1508,13 +1508,13 @@
&lt;input class="input-xlarge" id="focusedInput" type="text" value="{{_i}}This is focused...{{/i}}"&gt;
</pre>
<h3>{{_i}}Required inputs{{/i}}</h3>
<p>{{_i}}Style inputs via default browser functionality with <code>:valid</code>.{{/i}}</p>
<h3>{{_i}}Invalid inputs{{/i}}</h3>
<p>{{_i}}Style inputs via default browser functionality with <code>:invalid</code>. Specify a <code>type</code> and add the <code>required</code> attribute.{{/i}}</p>
<form class="bs-docs-example form-inline">
<input class="span4" type="text" value="{{_i}}Required input{{/i}}" required>
<input class="span3" type="email" placeholder="test@example.com" required>
</form>
<pre class="prettyprint linenums">
&lt;input class="span4" type="text" placeholder="{{_i}}Required input{{/i}}" required&gt;
&lt;input class="span3" type="email" required&gt;
</pre>
<h3>{{_i}}Disabled inputs{{/i}}</h3>

9
less/forms.less
View File

@ -366,14 +366,15 @@ input[type="checkbox"][readonly] {
// HTML5 invalid states
// Shares styles with the .control-group.error above
input:invalid,
select:invalid,
textarea:invalid {
input:focus:invalid,
textarea:focus:invalid,
select:focus:invalid {
color: #b94a48;
border-color: #ee5f5b;
&:focus {
border-color: darken(#ee5f5b, 10%);
.box-shadow(0 0 6px lighten(#ee5f5b, 20%));
@shadow: 0 0 6px lighten(#ee5f5b, 20%);
.box-shadow(@shadow);
}
}