mirror of
https://github.com/jdan/98.css.git
synced 2025-08-31 17:42:07 +02:00
add docs for dropdowns
This commit is contained in:
@@ -354,6 +354,7 @@ select {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
position: relative;
|
||||
padding-right: 32px;
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0V1V16H1V1H15V0Z' fill='%23DFDFDF'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1V15H2V2H14V1H2Z' fill='white'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H15H0V16H15V0H16V17Z' fill='black'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1H14V15H1V16H14H15V1Z' fill='%23808080'/%3E %3Crect x='2' y='2' width='12' height='13' fill='%23C0C0C0'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 6H4V7H5V8H6V9H7V10H8V9H9V8H10V7H11V6Z' fill='black'/%3E %3C/svg%3E");
|
||||
background-position: top 2px right 2px;
|
||||
background-repeat: no-repeat;
|
||||
|
@@ -354,6 +354,7 @@ select {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
position: relative;
|
||||
padding-right: 32px;
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0V1V16H1V1H15V0Z' fill='%23DFDFDF'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1V15H2V2H14V1H2Z' fill='white'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H15H0V16H15V0H16V17Z' fill='black'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1H14V15H1V16H14H15V1Z' fill='%23808080'/%3E %3Crect x='2' y='2' width='12' height='13' fill='%23C0C0C0'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 6H4V7H5V8H6V9H7V10H8V9H9V8H10V7H11V6Z' fill='black'/%3E %3C/svg%3E");
|
||||
background-position: top 2px right 2px;
|
||||
background-repeat: no-repeat;
|
||||
|
@@ -504,6 +504,57 @@
|
||||
— Microsoft Windows User Experience p. 175
|
||||
</footer>
|
||||
</blockquote>
|
||||
|
||||
<p>
|
||||
Dropdowns can be rendered by using the <code>select</code> and <code>option</code>
|
||||
elements.
|
||||
</p>
|
||||
|
||||
<div class="example">
|
||||
<select>
|
||||
<option>5 - Incredible!</option>
|
||||
<option>4 - Great!</option>
|
||||
<option>3 - Pretty good</option>
|
||||
<option>2 - Not so great</option>
|
||||
<option>1 - Unfortunate</option>
|
||||
</select>
|
||||
<details>
|
||||
<summary>Show code</summary>
|
||||
<pre><code><span class="hljs-tag"><<span class="hljs-name">select</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>5 - Incredible!<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>4 - Great!<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>3 - Pretty good<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>2 - Not so great<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>1 - Unfortunate<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">select</span>></span></code></pre>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
By default, the first option will be selected. You can change this by
|
||||
giving one of your <code>option</code> elements the <code>selected</code>
|
||||
attribute.
|
||||
</p>
|
||||
|
||||
<div class="example">
|
||||
<select>
|
||||
<option>5 - Incredible!</option>
|
||||
<option>4 - Great!</option>
|
||||
<option selected>3 - Pretty good</option>
|
||||
<option>2 - Not so great</option>
|
||||
<option>1 - Unfortunate</option>
|
||||
</select>
|
||||
<details>
|
||||
<summary>Show code</summary>
|
||||
<pre><code><span class="hljs-tag"><<span class="hljs-name">select</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>5 - Incredible!<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>4 - Great!<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">selected</span>></span>3 - Pretty good<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>2 - Not so great<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">option</span>></span>1 - Unfortunate<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">select</span>></span></code></pre>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
@@ -371,6 +371,37 @@
|
||||
— Microsoft Windows User Experience p. 175
|
||||
</footer>
|
||||
</blockquote>
|
||||
|
||||
<p>
|
||||
Dropdowns can be rendered by using the <code>select</code> and <code>option</code>
|
||||
elements.
|
||||
</p>
|
||||
|
||||
<%- example(`
|
||||
<select>
|
||||
<option>5 - Incredible!</option>
|
||||
<option>4 - Great!</option>
|
||||
<option>3 - Pretty good</option>
|
||||
<option>2 - Not so great</option>
|
||||
<option>1 - Unfortunate</option>
|
||||
</select>
|
||||
`) %>
|
||||
|
||||
<p>
|
||||
By default, the first option will be selected. You can change this by
|
||||
giving one of your <code>option</code> elements the <code>selected</code>
|
||||
attribute.
|
||||
</p>
|
||||
|
||||
<%- example(`
|
||||
<select>
|
||||
<option>5 - Incredible!</option>
|
||||
<option>4 - Great!</option>
|
||||
<option selected>3 - Pretty good</option>
|
||||
<option>2 - Not so great</option>
|
||||
<option>1 - Unfortunate</option>
|
||||
</select>
|
||||
`) %>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
Reference in New Issue
Block a user