Воскресенье, 30 Сентября 2012 11:51

Стилизация input range для WebKit браузеров

Written by 
Оцени эту запись
(10 Голоса)

Элемент <input type="range"> допускает стилизацию при помощи CSS для WebKit браузеров. Вы можете менять толщину, цвет фона и т.д. для бегунка и для самой основы. 

 

Вот так выглядит стандартный range:

 

 

 

А теперь пропишем для него стили:

 

 

 

 
.styled_range input[type="range"] {
 
-webkit-appearance: none;
 
background-color: blue;
 
width: 200px;
 
height: 10px;
 
border: 1px solid #606385;
 
}
 
.styled_range input[type="range"]::-webkit-slider-thumb {
 
-webkit-appearance: none;
 
background: #606385;
 
opacity: 0.5;
 
width: 10px;
 
height: 7px;
 
}

 

 

 

 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов