1
0
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:
Jordan Scales
2020-04-21 18:38:47 -04:00
parent 77b0d6b019
commit a1b0562d0d
5 changed files with 85 additions and 0 deletions

View File

@@ -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;

View File

@@ -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;

View File

@@ -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">&lt;<span class="hljs-name">select</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>5 - Incredible!<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>4 - Great!<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>3 - Pretty good<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>2 - Not so great<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>1 - Unfortunate<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">select</span>&gt;</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">&lt;<span class="hljs-name">select</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>5 - Incredible!<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>4 - Great!<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">option</span> <span class="hljs-attr">selected</span>&gt;</span>3 - Pretty good<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>2 - Not so great<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>1 - Unfortunate<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">select</span>&gt;</span></code></pre>
</details>
</div>
</div>
</section>

View File

@@ -371,6 +371,37 @@
&mdash; 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>

View File

@@ -326,6 +326,7 @@ select {
-webkit-appearance: none;
-moz-appearance: none;
position: relative;
padding-right: 32px;
background-image: svg-load("./icon/button-down.svg");
background-position: top 2px right 2px;
background-repeat: no-repeat;