Как стилизовать option select?

#html #css

Не получается применить шрифт и бордер к option. Почему и как это исправить?



.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;
}

  Сортировать:
  

    
      Дешевле
      Дороже
    
  
  ▼





Нужно чтобы шрифт и бордер был таким же, как и у всего select. Бордер применяется
только к родительскому окну.
    

Ответы

Ответ 1

option css-ом не стилизуются.
Кастомные select стилизуются с помощью js\jquery.
Например так:



// 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('
');
		// Style box
		$('
',{
			class: 'select__gap',
			text: 'Please select'
		}).insertAfter($this);
		
		var selectGap = $this.next('.select__gap'),
			caret = selectGap.find('.caret');
		// Add ul list
		$('
',{
			class: 'select__list'
		}).insertAfter(selectGap);		

		var selectList = selectGap.next('.select__list');
		// Add li - option items
		for(var i = 0; i < selectOptionLength; i++){
			$('
',{
				class: 'select__item',
				html: $('',{
					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);
}

Сортировать:

  item-1
  item-2
  


Ответ 2

Изменить стиль таких элементов как select нельзя. Для этого используют либо готовые
бибилиотеки js либо пишут свою обертку.

Прячем селект, формируем через дивы, спаны выпадающий список и при кликах на элементы
этого списка в спрятаном селекте ставим выбранное значение.

Есть такой плагин для jQuery https://select2.github.io/