mirror of
https://github.com/picocss/pico.git
synced 2025-04-22 09:26:14 -04:00
content(docs): Change disabled switch copy
This commit is contained in:
parent
3bcb55aa1f
commit
0eaece2c64
2 changed files with 4 additions and 4 deletions
|
@ -27,7 +27,7 @@
|
||||||
</<b>form</b>></code></pre></footer></article><p>Disabled and validation states:</p><article aria-label="Validation states examples"><form class="grid"><input type="text" placeholder="Valid" aria-label="Valid" aria-invalid="false"> <input type="text" placeholder="Invalid" aria-label="Invalid" aria-invalid="true"> <input type="text" placeholder="Disabled" aria-label="Disabled" disabled="disabled"> <input type="text" value="Readonly" aria-label="Readonly" readonly="readonly"></form><footer class="code"><pre><code><<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Valid"</u> <i>aria-invalid</i>=<u>"false"</u>>
|
</<b>form</b>></code></pre></footer></article><p>Disabled and validation states:</p><article aria-label="Validation states examples"><form class="grid"><input type="text" placeholder="Valid" aria-label="Valid" aria-invalid="false"> <input type="text" placeholder="Invalid" aria-label="Invalid" aria-invalid="true"> <input type="text" placeholder="Disabled" aria-label="Disabled" disabled="disabled"> <input type="text" value="Readonly" aria-label="Readonly" readonly="readonly"></form><footer class="code"><pre><code><<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Valid"</u> <i>aria-invalid</i>=<u>"false"</u>>
|
||||||
<<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Invalid"</u> <i>aria-invalid</i>=<u>"true"</u>>
|
<<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Invalid"</u> <i>aria-invalid</i>=<u>"true"</u>>
|
||||||
<<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Disabled"</u> <i>disabled</i>>
|
<<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Disabled"</u> <i>disabled</i>>
|
||||||
<<b>input</b> <i>type</i>=<u>"text"</u> <i>value</i>=<u>"Readonly"</u> <i>readonly</i>></code></pre></footer></article><p><code><<b>fieldset</b>></code> is unstyled and acts as a container for radios and checkboxes, providing a consistent <code><i>margin-bottom</i></code> for the set.</p><p><code><i>role</i>=<u>"switch"</u></code> on a <code><i>type</i>=<u>"checkbox"</u></code> enable a custom switch.</p><article aria-label="Select, radios, checkboxes, switch examples"><label for="fruit">Fruit</label> <select id="fruit" required><option value="" selected="selected">Select a fruit…</option><option>Banana</option><option>Watermelon</option><option>Apple</option><option>Orange</option><option>Mango</option></select><fieldset><legend>Size</legend><label for="small"><input type="radio" id="small" name="size" value="small" checked="checked"> Small</label> <label for="medium"><input type="radio" id="medium" name="size" value="medium"> Medium</label> <label for="large"><input type="radio" id="large" name="size" value="large"> Large</label> <label for="extralarge"><input type="radio" id="extralarge" name="size" value="extralarge" disabled="disabled"> Extra Large</label></fieldset><fieldset><label for="terms"><input type="checkbox" id="terms" name="terms"> I agree to the Terms and Conditions</label> <label for="terms_sharing"><input type="checkbox" id="terms_sharing" name="terms_sharing" disabled="disabled" checked="checked"> I agree to share my information with partners</label></fieldset><fieldset><label for="switch"><input type="checkbox" id="switch" name="switch" role="switch"> Publish on my profile</label> <label for="switch_disabled"><input type="checkbox" id="switch_disabled" name="switch_disabled" role="switch" disabled="disabled" checked="checked"> Publish on my profile my accomplishments</label></fieldset><footer class="code"><pre><code><em><!-- Select --></em>
|
<<b>input</b> <i>type</i>=<u>"text"</u> <i>value</i>=<u>"Readonly"</u> <i>readonly</i>></code></pre></footer></article><p><code><<b>fieldset</b>></code> is unstyled and acts as a container for radios and checkboxes, providing a consistent <code><i>margin-bottom</i></code> for the set.</p><p><code><i>role</i>=<u>"switch"</u></code> on a <code><i>type</i>=<u>"checkbox"</u></code> enable a custom switch.</p><article aria-label="Select, radios, checkboxes, switch examples"><label for="fruit">Fruit</label> <select id="fruit" required><option value="" selected="selected">Select a fruit…</option><option>Banana</option><option>Watermelon</option><option>Apple</option><option>Orange</option><option>Mango</option></select><fieldset><legend>Size</legend><label for="small"><input type="radio" id="small" name="size" value="small" checked="checked"> Small</label> <label for="medium"><input type="radio" id="medium" name="size" value="medium"> Medium</label> <label for="large"><input type="radio" id="large" name="size" value="large"> Large</label> <label for="extralarge"><input type="radio" id="extralarge" name="size" value="extralarge" disabled="disabled"> Extra Large</label></fieldset><fieldset><label for="terms"><input type="checkbox" id="terms" name="terms"> I agree to the Terms and Conditions</label> <label for="terms_sharing"><input type="checkbox" id="terms_sharing" name="terms_sharing" disabled="disabled" checked="checked"> I agree to share my information with partners</label></fieldset><fieldset><label for="switch"><input type="checkbox" id="switch" name="switch" role="switch"> Publish on my profile</label> <label for="switch_disabled"><input type="checkbox" id="switch_disabled" name="switch_disabled" role="switch" disabled="disabled" checked="checked"> User must change password at next logon</label></fieldset><footer class="code"><pre><code><em><!-- Select --></em>
|
||||||
<<b>label</b> <i>for</i>=<u>"fruit"</u>>Fruit</<b>label</b>>
|
<<b>label</b> <i>for</i>=<u>"fruit"</u>>Fruit</<b>label</b>>
|
||||||
<<b>select</b> <i>id</i>=<u>"fruit"</u> <i>required</i>>
|
<<b>select</b> <i>id</i>=<u>"fruit"</u> <i>required</i>>
|
||||||
<<b>option</b> <i>value</i>=<u>""</u> <i>selected</i>>Select a fruit…</<b>option</b>>
|
<<b>option</b> <i>value</i>=<u>""</u> <i>selected</i>>Select a fruit…</<b>option</b>>
|
||||||
|
@ -75,7 +75,7 @@
|
||||||
</<b>label</b>>
|
</<b>label</b>>
|
||||||
<<b>label</b> <i>for</i>=<u>"switch_disabled"</u>>
|
<<b>label</b> <i>for</i>=<u>"switch_disabled"</u>>
|
||||||
<<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"switch_disabled"</u> <i>name</i>=<u>"switch_disabled"</u> <i>role</i>=<u>"switch_disabled"</u> <i>disabled checked</i>>
|
<<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"switch_disabled"</u> <i>name</i>=<u>"switch_disabled"</u> <i>role</i>=<u>"switch_disabled"</u> <i>disabled checked</i>>
|
||||||
Publish on my profile my accomplishments
|
User must change password at next logon
|
||||||
</<b>label</b>>
|
</<b>label</b>>
|
||||||
</<b>fieldset</b>></code></pre></footer></article><p>You can change a checkbox to an indeterminate state by setting the <code><i>indeterminate</i></code> property to <code><u>true</u></code></p><article aria-label="Indeterminate checkbox example"><label for="indeterminate-checkbox"><input type="checkbox" id="indeterminate-checkbox" name="indeterminate-checkbox"> Select all</label><script>document.getElementById("indeterminate-checkbox").indeterminate=!0</script><footer class="code"><pre><code><<b>script</b>>
|
</<b>fieldset</b>></code></pre></footer></article><p>You can change a checkbox to an indeterminate state by setting the <code><i>indeterminate</i></code> property to <code><u>true</u></code></p><article aria-label="Indeterminate checkbox example"><label for="indeterminate-checkbox"><input type="checkbox" id="indeterminate-checkbox" name="indeterminate-checkbox"> Select all</label><script>document.getElementById("indeterminate-checkbox").indeterminate=!0</script><footer class="code"><pre><code><<b>script</b>>
|
||||||
<i>document</i>.<b>getElementById</b>(<u>'indeterminate-checkbox'</u>).<i>indeterminate</i> = <u>true</u>;
|
<i>document</i>.<b>getElementById</b>(<u>'indeterminate-checkbox'</u>).<i>indeterminate</i> = <u>true</u>;
|
||||||
|
|
|
@ -136,7 +136,7 @@
|
||||||
</label>
|
</label>
|
||||||
<label for="switch_disabled">
|
<label for="switch_disabled">
|
||||||
<input type="checkbox" id="switch_disabled" name="switch_disabled" role="switch" disabled checked>
|
<input type="checkbox" id="switch_disabled" name="switch_disabled" role="switch" disabled checked>
|
||||||
Publish on my profile my accomplishments
|
User must change password at next logon
|
||||||
</label>
|
</label>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
<footer class="code">
|
<footer class="code">
|
||||||
|
@ -189,7 +189,7 @@
|
||||||
</<b>label</b>>
|
</<b>label</b>>
|
||||||
<<b>label</b> <i>for</i>=<u>"switch_disabled"</u>>
|
<<b>label</b> <i>for</i>=<u>"switch_disabled"</u>>
|
||||||
<<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"switch_disabled"</u> <i>name</i>=<u>"switch_disabled"</u> <i>role</i>=<u>"switch_disabled"</u> <i>disabled checked</i>>
|
<<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"switch_disabled"</u> <i>name</i>=<u>"switch_disabled"</u> <i>role</i>=<u>"switch_disabled"</u> <i>disabled checked</i>>
|
||||||
Publish on my profile my accomplishments
|
User must change password at next logon
|
||||||
</<b>label</b>>
|
</<b>label</b>>
|
||||||
</<b>fieldset</b>></code></pre>
|
</<b>fieldset</b>></code></pre>
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue