HTML中的自定義下拉菜單

Question

我需要使用附加圖像用戶界面創建下拉菜單並使用自定義箭頭進行下拉菜單。我已經創建了一個樣本，但是我保留了箭頭，所以當點擊箭頭下拉而不是展開時。誰能給我一個解決方案。

CODE：

.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

• OR -

使用此代碼

<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