Skip to content

Commit 57c035f

Browse files
davidsgrogandavidsgrogan
committed
select.html
1 parent 1e271d5 commit 57c035f

1 file changed

Lines changed: 158 additions & 0 deletions

File tree

‎select.html‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
<!doctype html>
2+
<style>
3+
select,
4+
::picker(select) {
5+
appearance: base-select;
6+
}
7+
* {
8+
box-sizing: border-box;
9+
}
10+
11+
html {
12+
font-family: "Helvetica", "Arial", sans-serif;
13+
}
14+
15+
body {
16+
width: 100%;
17+
padding: 0 10px;
18+
max-width: 480px;
19+
margin: 0 auto;
20+
}
21+
22+
p {
23+
display: flex;
24+
gap: 10px;
25+
}
26+
27+
label {
28+
width: fit-content;
29+
align-self: center;
30+
}
31+
32+
select {
33+
flex: 1;
34+
}
35+
select {
36+
border: 2px solid #dddddd;
37+
background: #eeeeee;
38+
padding: 10px;
39+
transition: 0.4s;
40+
}
41+
42+
select:hover,
43+
select:focus {
44+
background: #dddddd;
45+
}
46+
select::picker-icon {
47+
color: #999999;
48+
transition: 0.4s rotate;
49+
}
50+
select:open::picker-icon {
51+
rotate: 180deg;
52+
}
53+
::picker(select) {
54+
border: none;
55+
}
56+
option {
57+
display: flex;
58+
justify-content: flex-start;
59+
gap: 20px;
60+
61+
border: 2px solid #dddddd;
62+
background: #eeeeee;
63+
padding: 10px;
64+
transition: 0.4s;
65+
}
66+
option:first-of-type {
67+
border-radius: 8px 8px 0 0;
68+
}
69+
70+
option:last-of-type {
71+
border-radius: 0 0 8px 8px;
72+
}
73+
74+
::picker(select) {
75+
border-radius: 8px;
76+
}
77+
78+
option:not(option:last-of-type) {
79+
border-bottom: none;
80+
}
81+
option:nth-of-type(odd) {
82+
background: white;
83+
}
84+
85+
option:hover,
86+
option:focus {
87+
background: plum;
88+
}
89+
selectedcontent .icon {
90+
display: none;
91+
}
92+
option::checkmark {
93+
order: 1;
94+
margin-left: auto;
95+
content: "☑️";
96+
}
97+
@supports not (appearance: base-select) {
98+
body::before {
99+
content: "Your browser does not support `appearance: base-select`.";
100+
color: black;
101+
background-color: wheat;
102+
position: fixed;
103+
left: 0;
104+
right: 0;
105+
top: 40%;
106+
text-align: center;
107+
padding: 1rem 0;
108+
z-index: 1;
109+
}
110+
}
111+
</style>
112+
113+
<form>
114+
<p>
115+
<label for="pet-select">Select pet:</label>
116+
<select id="pet-select">
117+
<button>
118+
<selectedcontent></selectedcontent>
119+
</button>
120+
121+
<option value="">Proper select</option>
122+
<option value="cat">
123+
<span class="icon" aria-hidden="true">🐱</span
124+
><span class="option-label">Cat</span>
125+
</option>
126+
<option value="dog">
127+
<span class="icon" aria-hidden="true">🐶</span
128+
><span class="option-label">Dog</span>
129+
</option>
130+
<option value="hamster">
131+
<span class="icon" aria-hidden="true">🐹</span
132+
><span class="option-label">Hamster</span>
133+
</option>
134+
</select>
135+
</p>
136+
<p>
137+
<label for="broken-select">Broken select:</label>
138+
<select id="broken-select">
139+
<button>
140+
<selectedcontent></selectedcontent>
141+
</button>
142+
<option value="">Broken select</option>
143+
<option value="chicken">
144+
<span class="icon" aria-hidden="true">🐔</span
145+
><span class="option-label">Chicken</span>
146+
</option>
147+
<option value="fish">
148+
<span class="icon" aria-hidden="true">🐟</span
149+
><span class="option-label">Fish</span>
150+
</option>
151+
<button>Some other button</button>
152+
<option value="snake">
153+
<span class="icon" aria-hidden="true">🐍</span
154+
><span class="option-label">Snake</span>
155+
</option>
156+
</select>
157+
</p>
158+
</form>

0 commit comments

Comments
 (0)