3

Не получается применить шрифт и бордер к 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;
}
<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>

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

0

2 ответа 2

5

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('<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>

1

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

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

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

2
  • Ну смотри, у него даже в посте это уже не дефолтный селектор. Просто нельзя сделать определенные вещи, часть можно кастомизировать 9 сен 2016 в 5:29
  • У меня дефолтный селектор. 9 сен 2016 в 5:33

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.