How to style option select?

Question

Can't apply font and border to option. Why and how to fix it?

.sortvibor { float: left; margin-top: 10px; font-family: 'PT Sans Narrow 400'; line-height: 20px; position: relative; } .sortvibor span { font-size: 18px; color: #000; } .sortvibor form { display: inline-block; padding-left: 5px; } .sortvibor select { font-family: 'PT Sans Narrow 400'; line-height: 20px; color: #000; font-size: 14px; min-width: 155px; padding: 2px 50px 2px 5px; appearance: none; -webkit-appearance: none; -moz-appearance: none; position: relative; background-color: transparent; text-decoration: underline; outline: none; border: 1px solid #467797; } .sortvibor option:checked { display: none; } .sortvibor option:not(:checked) { color: #467797; } .sortvibor option { border: 1px solid #467797; } .sortvibor .strelka { position: absolute; right: 10px; top: 4px; z-index: -9999; }

 <div class="sortvibor"> <span>Сортировать:</span> <form action=""> <select name="sort" id="sort"> <option selected value="">Дешевле</option> <option value="">Дороже</option> </select> </form> <span class="strelka">&#9660;</span> </div>

It is necessary that the font and border be the same as the entire select. Border applies only to the parent window.

HamSter HamSter 18.1k 6 gold signs 33 silver marks 83 bronze marks · Accepted Answer · 2016-09-09T05:55:09

option css are not stylized. Custom select are styled using js \ jquery. For example:

 // Select $('.select').each(function(){ // Variables var $this = $(this), selectOption = $this.find('option'), selectOptionLength = selectOption.length, selectedOption = selectOption.filter(':selected'), dur = 500; $this.hide(); // Wrap all in select box $this.wrap('<div class="select"></div>'); // Style box $('<div>',{ class: 'select__gap', text: 'Please select' }).insertAfter($this); var selectGap = $this.next('.select__gap'), caret = selectGap.find('.caret'); // Add ul list $('<ul>',{ class: 'select__list' }).insertAfter(selectGap); var selectList = selectGap.next('.select__list'); // Add li - option items for(var i = 0; i < selectOptionLength; i++){ $('<li>',{ class: 'select__item', html: $('<span>',{ text: selectOption.eq(i).text() }) }) .attr('data-value', selectOption.eq(i).val()) .appendTo(selectList); } // Find all items var selectItem = selectList.find('li'); selectList.slideUp(0); selectGap.on('click', function(){ if(!$(this).hasClass('on')){ $(this).addClass('on'); selectList.slideDown(dur); selectItem.on('click', function(){ var chooseItem = $(this).data('value'); $('select').val(chooseItem).attr('selected', 'selected'); selectGap.text($(this).find('span').text()); selectList.slideUp(dur); selectGap.removeClass('on'); }); } else { $(this).removeClass('on'); selectList.slideUp(dur); } }); });

 *, *:before, *:after{ box-sizing: border-box; } ul { padding: 0; margin: 0; list-style-type: none; } .select { display: inline-block; vertical-align: top; max-width: 245px; width: 100%; } .select-wrap { max-width: 700px; width: 100%; margin: 20px auto; } .select-wrap select { margin: 20px; } .select__gap { background: transparent; color: #467797; border: 1px solid #467797; text-transform: uppercase; font-size: 15px; padding: 10px 15px; cursor: pointer; position: relative; } .on.select__gap, .select__gap:hover { color: #467797; } .select__list { background: transparent; border: 1px solid #467797; margin: 0px 0; } .select__list.on { display: block; } .select__item span { display: block; padding: 10px 15px; cursor: pointer; color: #333; } .select__item.selected, .select__item span:hover { color: #467797; } .select__gap:after { content: ''; display: block; width: 10px; height: 10px; position: absolute; right: 15px; top: 50%; margin-top: -7px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 14px solid #000; -webkit-transition: all .27s ease-in-out; -o-transition: all .27s ease-in-out; transition: all .27s ease-in-out; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } .on.select__gap:after { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> Сортировать: <select name="select-box" id="selectId" class="select"> <option value="item-1" name="value">item-1</option> <option value="item-2" name="value">item-2</option> </select>

Alexandr Gulitskiy Alexandr Gulitskiy 76 4 bronze marks · Answer 2 · 2016-09-09T05:01:01

You cannot change the style of elements such as select. To do this, use either ready-made js libraries or write their own wrapper.

Hiding the select, forming through the divs, spans the drop-down list and when clicking on the elements of this list in the hidden select, we set the selected value.

There is such a plugin for jQuery https://select2.imtqy.com/

Well, look, he even in the post is no longer the default selector.

How to style option select?

2 answers 2

More articles: