Ввод селектора цвета HTML

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

введите здесь описание изображения

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

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

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

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


forms html color-picker css
person Your Friend Ken    schedule 01.10.2015    source источник
comment
Переключается ли какой-либо HTML-атрибут на что-то еще? Ответ будет нет.   -  person Rob    schedule 02.10.2015

Ответы (2)


arrow_upward
2
arrow_downward

Вот что я в итоге использовал:

$("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>

person Your Friend Ken    schedule 02.10.2015

arrow_upward
1
arrow_downward

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

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

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

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

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

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

person arcyqwerty    schedule 01.10.2015
comment
Я пытался избежать отображения шестнадцатеричного значения в другом элементе. Если бы браузер не поддерживал тип ввода цвета, у вас потенциально была бы дублирующаяся информация. Было бы неплохо, если бы существовало чистое CSS-решение. - person Your Friend Ken; 02.10.2015
comment
Вы можете использовать CSS :before или :after с content(#xxxxxx), установленным в JS, если вам действительно нужен один элемент. - person arcyqwerty; 02.10.2015
comment
Интересно, есть ли способ вызвать селектор цвета собственного браузера через javascript и зафиксировать результаты? - person Your Friend Ken; 02.10.2015
comment
Какой собственный селектор цвета вы имеете в виду? - person arcyqwerty; 02.10.2015
comment
диалоговое окно выбора цвета хрома - person Your Friend Ken; 02.10.2015
comment
Давайте продолжим обсуждение в чате. - person Your Friend Ken; 02.10.2015