Входной указатель цвета цветной бумаги HTML

Question

Сегодня я работал над формой HTML и вам нужно было создать селектор цветов, когда я обнаружил (при аварии), что тип ввода «цвет» фактически создает селектор цвета в хроме (а также firefox http://caniuse.com/#feat=input-color) ,

<input type="color" value="#333" />

Существуют ли какие-либо примеры использования цветового типа входного сигнала с грациозно потерпеть неудачу на другие селекторы?

Также было бы неплохо показать генерируемое шестнадцатеричное значение. В chrome он просто показывает кнопку с фоном выбранного цвета.

Есть ли способ стилизовать входной цвет HTML для отображения шестнадцатеричного значения выбранного цвета?

Answer 1

Есть ли примеры использования типа цветного ввода с грациозным отказом от других селекторов?

Вы можете найти способы изящно откинуться на другой выбор цвета, если цветной вход недоступен. Например, https://github.com/bgrins/spectrum. (Попробуйте найти «цветной цвет ввода» для других опций).

Есть ли способ стилизовать входной цвет HTML для отображения шестнадцатеричного значения выбранного цвета?

Для моего Chrome (45.0.2454.93) во время выбора отображается шестнадцатеричное значение в селекторе цветов. Если вы хотите показать его после выбора, значение ввода будет в шестнадцатеричном формате.

document.querySelector('input[type=color]').value 

Если вы хотите отобразить, что пользователь, вы можете заполнить еще один элемент с таким значением, когда onchange обжигают для элемента ввода.

Answer 2

Вот что я в конечном итоге с помощью:

$("input.color").each(function() { 
 
    var that = this; 
 
    $(this).parent().prepend($("<i class='fa fa-paint-brush color-icon'></i>").click(function() { 
 
    that.type = (that.type == "color") ? "text" : "color"; 
 
    })); 
 
}).change(function() { 
 
    $(this).attr("data-value", this.value); 
 
    this.type = "text"; 
 
});

label { 
 
    font-family: sans-serif; 
 
    width: 300px; 
 
    display: block; 
 
    position: relative; 
 
} 
 
input { 
 
    padding: 5px 15px; 
 
    font-size: 16px; 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
} 
 
input[type=color] { 
 
    padding: 0; 
 
    border: 0; 
 
    height: 40px; 
 
} 
 
input[type=color]:after { 
 
    content: attr(data-value); 
 
    position: absolute; 
 
    bottom: 10px; 
 
    text-align: center; 
 
    color: #fffff5; 
 
    display: block; 
 
    width: 100%; 
 
} 
 
.color-icon { 
 
    position: absolute; 
 
    bottom: 10px; 
 
    right: 10px; 
 
    color: #666; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<label> 
 
    Color: 
 
    <br /> 
 
    <input class="color" placeholder="#XXXXXX" data-value="#xxxxxx" /> 
 
</label>