선택 옵션이 아닌 서식 지정

Question

ul 및 li Here is the first jsfiddle을 사용하여 드롭 다운 목록을 생성하는 코드가 있습니다. 이것이 제가 드롭 다운을 보길 원하는 방법입니다. 그러나 내가 그들을 선택하고 옵션을 드롭 다운 목록을 변환하면 다음 형식을 수신 오전 current jsfiddle입니다. 내가 한 모든 것은 첫 번째 바이올린에서 리를 대체 할 수있는 옵션이었습니다. 어떤 아이디어를 어떻게 수정해야 하는가? 내가 대체이 모든 것을 무시하고있는 것처럼 보인다

현재 HTML 당신은 아래로 클래스 명 = "래퍼 - 드롭 다운-3 방울을 지정한

.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; 
    width: 100%; 
    height:100%; 
    top: 0; 
    left: 0; 
    right: 0; 
    /* Styles */ 
    background: white; 
    border-radius: inherit; 
    border: 0px 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: 1; 
    /*Gets rid of the padding where the bullets would be*/ 
    padding-left:0; 
    -moz-appearance: none; 
    -webkit-appearance:none; 
    text-indent: 0.01px; 
    text-overflow:''; 
} 
.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; 
}