0
필자는 ul 및 li (jsfiddle)을 사용하여 드롭 다운 목록이있는 jsfiddle를 가지고 있습니다. 이 옵션을 선택 옵션 드롭 다운 목록으로 변환하려고 할 때 동일한 옵션 ([jsfiddle]) 2이 표시되지 않습니다. 제가 CSS를 바꾼 방법과 관련이 있다고 생각합니다. (나는 옵션을 리로 바꿨습니다.)하지만 무엇이 잘못되었는지는 확실하지 않습니다. 현재 HTML과 CSS가 아래에 있으며 두 개의 jsfiddles가 텍스트 위쪽에 있습니다.ul 드롭 다운을 선택 드롭 다운으로 변환
HTML
<div class="dd wrapper-dropdown-3" tabindex="1">
<select id="Process" class="dropdown" name="Process" data-val-required="Required" dataval="true">
<option value="">--- Select One ---</option>
<option value="Extrusion"><a href="#">Extrusion</a></option>
<option value="Injection"><a href="#">Injection</a></option>
<option value="Secondary"><a href="#">Secondary</a></option>
<option value="Vinyl Dip Molding"><a href="#">Vinyl Dip Molding</a></option>
</select>
</div>
CSS
.wrapper-dropdown-3 {
/* Size and position */
position: relative;
width: 200px;
margin: 0 auto;
padding: 10px;
/* Styles */
background: #fff;
border-radius: 7px;
border: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 1px rgba(50, 50, 50, 0.1);
cursor: pointer;
outline: none;
/* Font settings */
font-weight: bold;
color: #0000FF;
}
.wrapper-dropdown-3:after {
content:"";
width: 0;
height: 0;
position: absolute;
right: 15px;
top: 50%;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: #8aa8bd transparent;
}
.wrapper-dropdown-3 .dropdown {
/* Size & position */
position: absolute;
top: 100%;
left: 0;
right: 0;
/* Styles */
background: white;
border-radius: inherit;
border: 1px solid rgba(0, 0, 0, 0.17);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
font-weight: normal;
list-style: none;
/* Hiding */
opacity: 0;
pointer-events: none;
/*Gets rid of the padding where the bullets would be*/
padding-left:0;
}
.wrapper-dropdown-3 .dropdown option a {
display: block;
padding: 10px;
text-decoration: none;
color: #0000FF;
border-bottom: 1px solid #e6e8ea;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1);
transition: all 0.3s ease-out;
}
.wrapper-dropdown-3 .dropdown option i {
float: right;
color: inherit;
}
.wrapper-dropdown-3 .dropdown option:first-of-type a {
border-radius: 7px 7px 0 0;
}
.wrapper-dropdown-3 .dropdown option:last-of-type a {
border-radius: 0 0 7px 7px;
border: none;
}
/* Hover state */
.wrapper-dropdown-3 .dropdown option:hover a {
background: #f3f8f8;
}
.wrapper-dropdown-3 .dropdown:after {
content:"";
width: 0;
height: 0;
position: absolute;
bottom: 100%;
right: 15px;
border-width: 0 6px 6px 6px;
border-style: solid;
border-color: #fff transparent;
}
.wrapper-dropdown-3 .dropdown:before {
content:"";
width: 0;
height: 0;
position: absolute;
bottom: 100%;
right: 13px;
border-width: 0 8px 8px 8px;
border-style: solid;
border-color: rgba(0, 0, 0, 0.1) transparent;
}
.wrapper-dropdown-3.active .dropdown {
opacity: 1;
pointer-events: auto;
}