기본
html
1
2
3
4
<select class="o-input o-input--select" title="★title">
<option>★option</option>
<option>★option</option>
</select>
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// select
.o-input--select {
display: block;
width: 100%;
height: 45px;
padding: 0 35px 0 14px;
border: 1px solid #ccc;
background: #fff;
font-size: 15px;
line-height: 43px;
&:hover,
&:focus {
border-color: #000;
}
&:disabled {
background-color: #f4f4f4;
cursor: default;
}
}
custom
view
html
1
2
3
4
5
6
7
8
<div class="c-combobox"> <!-- [D] 활성화 인 경우 is-active, disabled 인 경우 ia-disabled 클래스 추가 -->
<span class="c-combobox__text" aria-hidden="true"></span>
<select class="c-combobox__select" title="★title"> <!-- [D] disabled 인 경우 속성 추가 -->
<option selected>★option1</option> <!-- selected -->
<option>★option2</option>
<option>★option3</option>
</select>
</div>
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// combobox
.c-combobox {
display: inline-block;
position: relative;
vertical-align: top;
&__select {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
&__text {
display: block;
width: 100px;
height: 50px;
border: 1px solid #000;
}
&.is-disabled &__text {
border-color: red;
}
&.is-active &__text {
outline:1px solid blue;
}
}