HTML의 사용자 정의 드롭 다운

Question

드롭 다운을 위해 사용자 정의 화살표가있는 첨부 된 이미지 사용자 인터페이스로 드롭 다운을 작성해야합니다. 샘플을 만들었지 만, 화살표를 클릭하지 않고 화살표를 클릭하지 않을 때는 선택 항목에서 화살표를 계속 확장했습니다. 누구든지 내게 해결책을 줄 수 있겠 어.

코드 :

.styled_select { 
 
    display: block; 
 
    position: relative; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 50%; 
 
    height: auto; 
 
    border: 1px solid #ccc; 
 
    -webkit-border-radius: 4px; 
 
    border-radius: 4px; 
 
} 
 
.styled_select select { 
 
    padding: 9px 32px 9px 12px; 
 
    white-space: nowrap; 
 
    width: 100%; 
 
    font-size: 13px; 
 
    border: none; 
 
    background: transparent; 
 
    cursor: pointer; 
 
    -webkit-appearance: none; 
 
} 
 
.styled_select:after { 
 
    position: absolute; 
 
    top: 40%; 
 
    right: 6px; 
 
    width: 36px; 
 
    height: 11px; 
 
    background: url(basics-08-128.png) no-repeat 50% 60%; 
 
    speak: none; 
 
    content: ''; 
 
}

<span class="styled_select"> 
 
    <select> 
 
    <option value="">Select One</option> 
 
    <option value="1">Option 01</option> 
 
    <option value="2">Option 02</option> 
 
    </select> 
 
</span>

사람이 나에게이 문제에 대한 해결책을주십시오. 선택 드롭 다운에 대한 사용자 정의 화살표를 추가하는 방법, 나는 화살표가 제대로 작동하지 않습니다 넣어 퍼팅. 모두에게 미리 감사드립니다.

Answer 1

안녕하세요이 확실히 도움이 될 것입니다보십시오

HTML :

<select id="mounth" class="form-control"> 
    <option>Category</option> 
    <option>Category1</option> 
    <option>Category2</option> 
    <option>Category3</option> 
    <option>Category4</option> 
</select> 

사용이 CSS :

/* CUSTOM-SELECT */ 
.select-hidden { 
    display: none; 
    visibility: hidden; 
    padding-right: 10px; 
} 
.select { 
    color: #000; 
    cursor: pointer; 
    display: inline-block; 
    font-size: 16px; 
    height: 40px; 
    position: relative; 
    width: 220px; 
} 
.select-styled::after { 
    -moz-border-bottom-colors: none; 
    -moz-border-left-colors: none; 
    -moz-border-right-colors: none; 
    -moz-border-top-colors: none; 
    border-color: #212121 transparent transparent; 
    border-image: none; 
    border-style: solid; 
    border-width: 7px; 
    content: ""; 
    height: 0; 
    position: absolute; 
    right: 10px; 
    top: 16px; 
    width: 0; 
} 
.select-styled { 
    background-color: #fff; 
    bottom: 0; 
    left: 0; 
    padding: 8px 15px; 
    position: absolute; 
    right: 0; 
    top: 0; 
    transition: all 0.5s ease-in 0s; 
    border: 1px solid #ccc; 
    color: #878787; 
} 
.select-styled:hover { 
    background-color: #e2e2e2; 
} 
.select { 
    color: #fff; 
    cursor: pointer; 
    font-size: 16px; 
} 
.select { 
    color: #fff; 
    cursor: pointer; 
    font-size: 16px; 
} 
.select-options { 
    background-color: #e2e2e2; 
    display: none; 
    left: 0; 
    list-style: outside none none; 
    margin: 0; 
    padding: 0; 
    position: absolute; 
    right: 0; 
    top: 100%; 
    z-index: 999; 
} 
.select-options li[rel="hide"] { 
    display: none; 
} 
.select-options li { 
    border-top: 1px solid #ccc; 
    margin: 0; 
    padding: 5px 0; 
    text-indent: 15px; 
    transition: all 0.15s ease-in 0s; 
    color:#5a5a5a; 
} 
.select-options { 
    list-style: outside none none; 
    margin:0; padding:0; 
    -webkit-transition: all 0.5s ease-in-out; 
    -moz-transition: all 0.5s ease-in-out; 
    transition: all 0.5s ease-in-out; 
    animation: 0.6s ease-out 0s normal none 1 running expand; 
    transform: scale3d(1, 1, 1); 
    transition: none 0s ease 0s ; 
    transition: transform 0.3s ease 0s; 
    border: 1px solid #ccc; 
    border-top:none; 
    box-shadow:0 1px 1px #ccc; 
} 
.select-styled.active::after { 
    -moz-border-bottom-colors: none; 
    -moz-border-left-colors: none; 
    -moz-border-right-colors: none; 
    -moz-border-top-colors: none; 
    border-color: transparent transparent #212121; 
    border-image: none; 
    border-style: solid; 
    border-width: 7px; 
    content: ""; 
    height: 0; 
    position: absolute; 
    right: 10px; 
    top: 8px; 
    width: 0; 
} 

JS :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" type="text/javascript"></script> 
    <script> 
    $('select').each(function(){ 
    var $this = $(this), numberOfOptions = $(this).children('option').length; 

    $this.addClass('select-hidden'); 
    $this.wrap('<div class="select"></div>'); 
    $this.after('<div class="select-styled"></div>'); 

    var $styledSelect = $this.next('div.select-styled'); 
    $styledSelect.text($this.children('option').eq(0).text()); 

    var $list = $('<ul />', { 
     'class': 'select-options' 
    }).insertAfter($styledSelect); 

    for (var i = 0; i < numberOfOptions; i++) { 
     $('<li />', { 
      text: $this.children('option').eq(i).text(), 
      rel: $this.children('option').eq(i).val() 
     }).appendTo($list); 
    } 

    var $listItems = $list.children('li'); 

    $styledSelect.click(function(e) { 
     e.stopPropagation(); 
     $('div.select-styled.active').not(this).each(function(){ 
      $(this).removeClass('active').next('ul.select-options').hide(); 
     }); 
     $(this).toggleClass('active').next('ul.select-options').toggle(); 
    }); 

    $listItems.click(function(e) { 
     e.stopPropagation(); 
     $styledSelect.text($(this).text()).removeClass('active'); 
     $this.val($(this).attr('rel')); 
     $list.hide(); 
     //console.log($this.val()); 
    }); 

    $(document).click(function() { 
     $styledSelect.removeClass('active'); 
     $list.hide(); 
    }); 

}); 

    </script> 

Answer 2

를 사용하여 부트 스트랩 - 선택 확장 https://silviomoreto.github.io/bootstrap-select/examples/#menu-arrow

• 또는 -

사용이 코드

<div class="rail-select"> 
    <div class="select-side"> 
    <i class="glyphicon glyphicon-menu-down blue"></i> 
    </div> 
    <select class="form-control" id="sel1"> 
          <option>1</option> 
          <option>2</option> 
          <option>3</option> 
          <option>4</option> 
         </select> 
</div> 

CSS

.rail-select { 
    position: absolute; 
    width: 150px; 

    select { 
    border: solid 1px grey; 
    border-radius: 3px; 
    font-size: 16px; 
    color: gray; 
    height: 42px; 
    appearance: none; 
    -moz-appearance: none; 
    -webkit-appearance: none; 

    &:focus { 
     outline: none; 
     box-shadow: none; 
     border: solid 1px grey; 
    } 
    } 

    .select-side { 
    &:before { 
     border-left: solid 1px lightgrey; 
     content : ""; 
     position: absolute; 
     left : 0; 
     bottom : 0; 
     height : 100%; 
     width : 1px; /* or 100px */ 
    } 

    width: 40px; 
    position: absolute; 
    top: 0px; 
    background-color: #F3F9FE; 
    height: 100%; 
    left: 120px; 
    border-radius: 0px 3px 3px 0px; 
    border-right: solid 1px gray; 
    border-top: solid 1px gray; 
    border-bottom: solid 1px gray; 
    pointer-events:none; 

    i { 
     &.blue { 
     color: #4E7AF0; 
     } 

     left: 30%; 
     top: 12px; 
    } 
    } 
} 

http://codepen.io/blonfu/pen/EyyPpJ

[CSS의