HTMLのselect要素の新たな可能性

1:11 - Basic markup

<label for="sort-select">Sort by</label>
<select id="sort-select">
    <option>Newest</option>
    <option>Oldest</option>
</select>

2:37 - Native form control

select {
 
}

2:50 - appearance: base-select

body {
    font-family: Gill Sans, sans-serif;
}

select {
    appearance: base-select;
}

3:07 - Style the select button

select {
    appearance: base-select;
    background-color: var(--green-10);
    border: none;
    padding: 0.6em 1em;
}

3:08 - Picker icon

select:open {
    background-color: var(--green-100);
    color: white;
}

3:29 - Picker icon open state

select:open {
    background-color: var(--green-100);
    color: white;
}

select:open::picker-icon {
    content: url(icons/arrow-white.svg);
}

4:08 - Picker select

::picker(select) {

}

4:21 - Picker select spacing

::picker(select) {
    appearance: base-select;
    padding: 4px;
    margin-top: 0.5em;
}

4:28 - Picker select border and shadow

::picker(select) {
    appearance: base-select;
    padding: 4px;
    margin-top: 0.5em;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 9px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

4:36 - Custom option styles

option:checked {
    font-weight: 600;
}

option:not(:checked) {
    color: #777;
}

4:42 - Picker option checkmark

option::checkmark {
    content: url(checkmark.svg);
    width: 0.65em;
}

5:31 - Images in option

<option value="flower">
    <img src="flowers.svg" alt="">
    <span class="text">Flowers</span>
</option>

5:52 - Custom option highlight

option::checkmark {
    display: none;
}

option:checked {
    background: #00857e;
    color: white;
}

6:20 - Grid layout in drop downs

::picker(select) {
    display: grid;
    grid-template: 
       1fr 1fr / 1fr 1fr 1fr;
    gap: 1rem;
}

6:43 - Select with image options

<select>
    <option value="anywhere">
        <img src="icons/all.svg" alt="">
        <span class="text">Everything</span>
    </option>
    <option value="buildings">
        <img src="icons/buildings.svg" alt="">
        <span class="text">Buildings</span>
    </option>
    <option value="flowers">
        <img src="icons/flower.svg" alt="">
        <span class="text">Flowers</span>
    </option>
    
</select>

7:11 - Select menu

<select>
    
    
    
    <option>    </option>
    <option>    </option>
    <option>    </option>
</select>

7:13 - Select menu button

<select>
    <button>
    
    </button>
    <option>    </option>
    <option>    </option>
    <option>    </option>
</select>

7:29 - SelectedContent Element

<select>
    <button>
        <selectedcontent></selectedcontent>
    </button>
    <option>     </option>
    <option>     </option>
    <option>     </option>
</select>