Skip to content

Commit fbc730a

Browse files
michael-n-cooperValerie Youngmcking65carmacleod
committed
Generated by TRAVIS-CI 5075025
Add example of select-only combobox (pull #1396) Resolves issue #1026 by adding a new select-only combobox example. Co-authored-by: Valerie Young <[email protected]> Co-authored-by: Matt King <[email protected]> Co-authored-by: Carolyn MacLeod <[email protected]>
1 parent c9074f4 commit fbc730a

11 files changed

+1005
-6
lines changed

‎examples/combobox/combobox-autocomplete-both.html

+1
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ <h1>Editable Combobox With Both List and Inline Autocomplete Example</h1>
3939
</p>
4040
<p>Similar examples include:</p>
4141
<ul>
42+
<li><a href="examples/combobox/combobox-select-only.html">Select-Only Combobox</a>: A single-select combobox with no text input that is functionally similar to an HTML <code>select</code> element.</li>
4243
<li><a href="combobox-autocomplete-list.html">Editable Combobox with List Autocomplete</a>: An editable combobox that demonstrates the autocomplete behavior known as <q>list with manual selection</q>.</li>
4344
<li><a href="combobox-autocomplete-none.html">Editable Combobox Without Autocomplete</a>: An editable combobox that demonstrates the behavior associated with <code>aria-autocomplete=none</code>.</li>
4445
<li><a href="grid-combo.html">Editable Combobox with Grid Popup</a>: An editable combobox that presents suggestions in a grid, enabling users to navigate descriptive information about each suggestion.</li>

‎examples/combobox/combobox-autocomplete-list.html

+1
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ <h1>Editable Combobox With List Autocomplete Example</h1>
3939
</p>
4040
<p>Similar examples include:</p>
4141
<ul>
42+
<li><a href="examples/combobox/combobox-select-only.html">Select-Only Combobox</a>: A single-select combobox with no text input that is functionally similar to an HTML <code>select</code> element.</li>
4243
<li><a href="combobox-autocomplete-both.html">Editable Combobox with Both List and Inline Autocomplete</a>: An editable combobox that demonstrates the autocomplete behavior known as <q>list with inline autocomplete</q>.</li>
4344
<li><a href="combobox-autocomplete-none.html">Editable Combobox Without Autocomplete</a>: An editable combobox that demonstrates the behavior associated with <code>aria-autocomplete=none</code>.</li>
4445
<li><a href="grid-combo.html">Editable Combobox with Grid Popup</a>: An editable combobox that presents suggestions in a grid, enabling users to navigate descriptive information about each suggestion.</li>

‎examples/combobox/combobox-autocomplete-none.html

+1
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ <h1>Editable Combobox without Autocomplete Example</h1>
3636
</p>
3737
<p>Similar examples include: </p>
3838
<ul>
39+
<li><a href="examples/combobox/combobox-select-only.html">Select-Only Combobox</a>: A single-select combobox with no text input that is functionally similar to an HTML <code>select</code> element.</li>
3940
<li><a href="combobox-autocomplete-both.html">Editable Combobox with Both List and Inline Autocomplete</a>: An editable combobox that demonstrates the autocomplete behavior known as <q>list with inline autocomplete</q>.</li>
4041
<li><a href="combobox-autocomplete-list.html">Editable Combobox with List Autocomplete</a>: An editable combobox that demonstrates the autocomplete behavior known as <q>list with manual selection</q>.</li>
4142
<li><a href="grid-combo.html">Editable Combobox with Grid Popup</a>: An editable combobox that presents suggestions in a grid, enabling users to navigate descriptive information about each suggestion.</li>

‎examples/combobox/combobox-select-only.html

+417
Large diffs are not rendered by default.

‎examples/combobox/css/select-only.css

+103
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
.combo *,
2+
.combo *::before,
3+
.combo *::after {
4+
box-sizing: border-box;
5+
}
6+
7+
.combo {
8+
display: block;
9+
margin-bottom: 1.5em;
10+
max-width: 400px;
11+
position: relative;
12+
}
13+
14+
.combo::after {
15+
border-bottom: 2px solid rgba(0, 0, 0, 0.75);
16+
border-right: 2px solid rgba(0, 0, 0, 0.75);
17+
content: '';
18+
display: block;
19+
height: 12px;
20+
pointer-events: none;
21+
position: absolute;
22+
right: 16px;
23+
top: 50%;
24+
transform: translate(0, -65%) rotate(45deg);
25+
width: 12px;
26+
}
27+
28+
.combo-input {
29+
background-color: #f5f5f5;
30+
border: 2px solid rgba(0, 0, 0, 0.75);
31+
border-radius: 4px;
32+
display: block;
33+
font-size: 1em;
34+
min-height: calc(1.4em + 26px);
35+
padding: 12px 16px 14px;
36+
text-align: left;
37+
width: 100%;
38+
}
39+
40+
.open .combo-input {
41+
border-radius: 4px 4px 0 0;
42+
}
43+
44+
.combo-input:focus {
45+
border-color: #0067b8;
46+
box-shadow: 0 0 4px 2px #0067b8;
47+
outline: 4px solid transparent;
48+
}
49+
50+
.combo-label {
51+
display: block;
52+
font-size: 20px;
53+
font-weight: 100;
54+
margin-bottom: 0.25em;
55+
}
56+
57+
.combo-menu {
58+
background-color: #f5f5f5;
59+
border: 1px solid rgba(0, 0, 0, 0.75);
60+
border-radius: 0 0 4px 4px;
61+
display: none;
62+
max-height: 300px;
63+
overflow-y:scroll;
64+
left: 0;
65+
position: absolute;
66+
top: 100%;
67+
width: 100%;
68+
z-index: 100;
69+
}
70+
71+
.open .combo-menu {
72+
display: block;
73+
}
74+
75+
.combo-option {
76+
padding: 10px 12px 12px;
77+
}
78+
79+
.combo-option:hover {
80+
background-color: rgba(0, 0, 0, 0.1);
81+
}
82+
83+
.combo-option.option-current {
84+
outline: 3px solid #0067b8;
85+
outline-offset: -3px;
86+
}
87+
88+
.combo-option[aria-selected="true"] {
89+
padding-right: 30px;
90+
position: relative;
91+
}
92+
93+
.combo-option[aria-selected="true"]::after {
94+
border-bottom: 2px solid #000;
95+
border-right: 2px solid #000;
96+
content: '';
97+
height: 16px;
98+
position: absolute;
99+
right: 15px;
100+
top: 50%;
101+
transform: translate(0, -50%) rotate(45deg);
102+
width: 8px;
103+
}

‎examples/combobox/grid-combo.html

+1
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ <h1>Editable Combobox with Grid Popup Example</h1>
4444
</p>
4545
<p>Similar examples include: </p>
4646
<ul>
47+
<li><a href="examples/combobox/combobox-select-only.html">Select-Only Combobox</a>: A single-select combobox with no text input that is functionally similar to an HTML <code>select</code> element.</li>
4748
<li><a href="combobox-autocomplete-both.html">Editable Combobox with Both List and Inline Autocomplete</a>: An editable combobox that demonstrates the autocomplete behavior known as <q>list with inline autocomplete</q>.</li>
4849
<li><a href="combobox-autocomplete-list.html">Editable Combobox with List Autocomplete</a>: An editable combobox that demonstrates the autocomplete behavior known as <q>list with manual selection</q>.</li>
4950
<li><a href="combobox-autocomplete-none.html">Editable Combobox Without Autocomplete</a>: An editable combobox that demonstrates the behavior associated with <code>aria-autocomplete=none</code>.</li>

0 commit comments

Comments
 (0)