Индивидуальный выпадающий текст в 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

Использование Bootstrap-выберите расширение 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