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