Среда, 12 Июня 2013 11:27

Input color - выбор цвета в HTML

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

Среди новых типов input в HTML5 появился элемент для выбора цвета, аналог color-picker'ов в различных онлайн сервисах и Photoshop.

 

Пример:

 

<input type="color">

 

Результат:

 

 

 

При клике на элемент, должно появиться окошко для выбора цвета. В данном элементе для выбора цвета есть бегунок, цветной квадрат с палитрой и основные цвета. RGB код выбранного цвета можно посмотреть в соответственных полях. 

 

 

Вид элемента при клике:

 

 

 

 

При желании стилизации элемента при помощи CSS, можно использовать и изменять такие стили (только WebKit браузеры):

 

 

input[type="color"] { // сам элемент
    -webkit-appearance: square-button;
    width: 44px;
    height: 23px;
}
input[type="color"]::-webkit-color-swatch-wrapper { // внутренняя часть элемента
    display:-webkit-flex;
    padding: 4px 2px;
    box-sizing: border-box;
    -webkit-user-modify: read-only !important;
    width: 100%;
    height: 100%
}
input[type="color"]::-webkit-color-swatch { // цветной квадратик
    background-color: #000000;
    border: 1px solid #777777;
    -webkit-flex: 1;
    -webkit-user-modify: read-only !important;
}
input[type="color"][list] {
    -webkit-appearance: menulist;
    width: 88px;
    height: 23px;
}
input[type="color"][list]::-webkit-color-swatch-wrapper {
    padding-left: 8px;
    padding-right: 24px;
}
input[type="color"][list]::-webkit-color-swatch {
    border-color: #000000;
}

 

 

 

 

 

Выбранный в элементе цвет можно получить при помощи value. Для проверки выберите цвет в input, нажмите на "Получить результат" и ждите результата кода цвета в фиолетовом поле.

 

 



Получить результат

 

 

 

 

 

Additional Info

You have no rights to post comments

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