Кроссбраузерные input number и select с возможностью изменения стилей

Статья

Как известно данные теги бывают нужны в очень большом количестве проектов. Но есть нюанс, что они отображаются в каждом браузере по разному, и чтобы изменить им стиль надо очень много танцев с бубном.

Нам поможет плагин jQueryFormStyler.

Просто ставим его в свой проект и в html подключаем нужные нам файлы:

jquery.formstyler.css
jquery.formstyler.min.js

Из названия можно понять, что нужен плагин jQuery. И подключить его нужно до того как подключаем скрипт jquery.formstyler.min.js.

Далее нужно задать для каких классов будет работать плагин.

Делается это таким кодом:

$('selector').styler();

1	$('selector').styler();

Добавим 2 варианта. Первый для <input type=’number’>, а второй для <select> соответственно:

$('.custom_number').styler();
$('.custom_select').styler();

1 2	$('.custom_number').styler(); $('.custom_select').styler();

Теперь добавим в html сами элементы, которые будем изменять:

<input type="number" class="custom_number">
<select class="custom_select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="1234">1234</option>
</select>

</select>

До этого момента все можно было сделать и без этой статьи. Так как это описание есть в документации плагины. Дальше идут стили, позволяющие поменять внешний вид для элементов <input type=»number»> и <select>

Собственно вот стили для <input type=’number’>

.custom_number.jq-number{
display: inline-block;
position: relative;
font-size: 0;
}
.custom_number.jq-number .custom_number{
font-size: 13.3333px;
padding-right: 14px;
width: 100%;
height: 100%;
}
.custom_number.jq-number:hover .jq-number__spin{
opacity: 1;
}
.custom_number.jq-number.focused .jq-number__spin{
opacity: 1;
}
.custom_number .jq-number__field{
display: inline-block;
width: 100%;
height: 100%;
}
.custom_number .jq-number__spin{
position: absolute;
right: 1px;
opacity: 0;
width: 14px;
background: #dfdede;
height: 8px;
max-height: calc(50% - 1px);
display: flex;
align-items: center;
justify-content: center;
}
.custom_number .jq-number__spin:hover{
background: #b4b4b4;
}
.custom_number .jq-number__spin:active{
background: #3f3f3f;
}
.custom_number .jq-number__spin:after{
content: '';
width: 6px;
height: 4px;
border-style: solid;
}
.custom_number .jq-number__spin.minus{
top: 50%;
}
.custom_number .jq-number__spin.minus:after{
border-width: 4px 3px 0 3px;
border-color: #616161 transparent transparent transparent;
}
.custom_number .jq-number__spin.minus:hover:after{
border-color: #000 transparent transparent transparent;
}
.custom_number .jq-number__spin.minus:active:after{
border-color: #fff transparent transparent transparent;
}
.custom_number .jq-number__spin.plus{
bottom: 50%;
}
.custom_number .jq-number__spin.plus:after{
border-width: 0 3px 4px 3px;
border-color: transparent transparent #616161 transparent;
}
.custom_number .jq-number__spin.plus:hover:after{
border-color: transparent transparent #000 transparent;
}
.custom_number .jq-number__spin.plus:active:after{
border-color: transparent transparent #fff transparent;
}

.custom_number.jq-number{

display: inline-block;

position: relative;

font-size: 0;

}

.custom_number.jq-number .custom_number{

font-size: 13.3333px;

padding-right: 14px;

width: 100%;

height: 100%;

}

.custom_number.jq-number:hover .jq-number__spin{

opacity: 1;

}

.custom_number.jq-number.focused .jq-number__spin{

opacity: 1;

}

.custom_number .jq-number__field{

display: inline-block;

width: 100%;

height: 100%;

}

.custom_number .jq-number__spin{

position: absolute;

right: 1px;

opacity: 0;

width: 14px;

background: #dfdede;

height: 8px;

max-height: calc(50% - 1px);

display: flex;

align-items: center;

justify-content: center;

}

.custom_number .jq-number__spin:hover{

background: #b4b4b4;

}

.custom_number .jq-number__spin:active{

background: #3f3f3f;

}

.custom_number .jq-number__spin:after{

content: '';

width: 6px;

height: 4px;

border-style: solid;

}

.custom_number .jq-number__spin.minus{

top: 50%;

}

.custom_number .jq-number__spin.minus:after{

border-width: 4px 3px 0 3px;

border-color: #616161 transparent transparent transparent;

}

.custom_number .jq-number__spin.minus:hover:after{

border-color: #000 transparent transparent transparent;

}

.custom_number .jq-number__spin.minus:active:after{

border-color: #fff transparent transparent transparent;

}

.custom_number .jq-number__spin.plus{

bottom: 50%;

}

.custom_number .jq-number__spin.plus:after{

border-width: 0 3px 4px 3px;

border-color: transparent transparent #616161 transparent;

}

.custom_number .jq-number__spin.plus:hover:after{

border-color: transparent transparent #000 transparent;

}

.custom_number .jq-number__spin.plus:active:after{

border-color: transparent transparent #fff transparent;

}

А вот для <select>

.custom_select{
display: inline-block;
position: relative;
padding: 0;
background: #fff;
font-size: 0;
}
.custom_select .jq-selectbox__select{
display: inline-block;
height: 100%;
padding: 0;
}
.custom_select .jq-selectbox__select-text{
display: inline-block;
height: 100%;
overflow: visible;
font-size: 13.3333px;
font-family: Arial;
padding: 0;
border: 1px solid #000;
padding-left: 4px;
padding-right: 14px;
}
.custom_select .jq-selectbox__trigger{
position: absolute;
display: flex;
align-items: center;
justify-content: center;
right: 0;
top: 0;
height: 100%;
width: 12px;
}
.custom_select .jq-selectbox__trigger:after{
content: '';
width: 6px;
height: 4px;
border-style: solid;
border-width: 4px 3px 0 3px;
border-color: #616161 transparent transparent transparent;
}
.custom_select .jq-selectbox__dropdown{
width: 100%;
border: 1px solid #7A9CD3;
font-size: 13.3333px;
font-family: Arial;
background: #fff;
}
.custom_select.jq-selectbox li{
padding-top: 1px;
padding-bottom: 1px;
padding-left: 2px;
padding-right: 2px;
}
.custom_select.jq-selectbox li.sel{
background: #1E90FF;
color: #fff;
}
.custom_select.jq-selectbox ul:hover li.sel{
background: #fff;
color: #000;
}
.custom_select.jq-selectbox ul:hover li:hover{
background: #1E90FF;
color: #fff;
}

.custom_select{

display: inline-block;

position: relative;

padding: 0;

background: #fff;

font-size: 0;

}

.custom_select .jq-selectbox__select{

display: inline-block;

height: 100%;

padding: 0;

}

.custom_select .jq-selectbox__select-text{

display: inline-block;

height: 100%;

overflow: visible;

font-size: 13.3333px;

font-family: Arial;

padding: 0;

border: 1px solid #000;

padding-left: 4px;

padding-right: 14px;

}

.custom_select .jq-selectbox__trigger{

position: absolute;

display: flex;

align-items: center;

justify-content: center;

right: 0;

top: 0;

height: 100%;

width: 12px;

}

.custom_select .jq-selectbox__trigger:after{

content: '';

width: 6px;

height: 4px;

border-style: solid;

border-width: 4px 3px 0 3px;

border-color: #616161 transparent transparent transparent;

}

.custom_select .jq-selectbox__dropdown{

width: 100%;

border: 1px solid #7A9CD3;

font-size: 13.3333px;

font-family: Arial;

background: #fff;

}

.custom_select.jq-selectbox li{

padding-top: 1px;

padding-bottom: 1px;

padding-left: 2px;

padding-right: 2px;

}

.custom_select.jq-selectbox li.sel{

background: #1E90FF;

color: #fff;

}

.custom_select.jq-selectbox ul:hover li.sel{

background: #fff;

color: #000;

}

.custom_select.jq-selectbox ul:hover li:hover{

background: #1E90FF;

color: #fff;

}

Готовый вариант можно посмотреть по ссылке

https://codepen.io/klusovd/pen/xxbZRWm

CSS HTML JQuery

Предыдущий пост

Плавный скролл страницы по якорным ссылкам