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">▼</span>
</div>
It is necessary that the font and border be the same as for the whole select. The border only applies to the parent window.
Answer:
option
css are not styled. Custom select is styled with js \ jquery. For example like this:
// 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>