web-dev-qa-db-ja.com

input [type = color]の色を囲むボックスを制御するWebkit CSS?

input[type=color]の色を囲むボックスの色/サイズ/スタイルを制御できるWebkit固有のCSSスタイルはありますか?入力の色と背景色をすでに設定しているので、古いChromeとFirefoxで使用しているクロス互換性のあるポリフィルで見栄えがします。しかし、今ではChromeには実際にカラーピッカーがあり、入力の色と背景色の両方が同じ色に設定されている場合、入力の中央に1pxグレーのボックスを残す色の周りにボックスがあります。それを取り除くには、そのボックスの幅を0に設定するか、スタイルをnoneに変更するか、最悪の場合、色を背景色と同じ色に設定しますか?

この画像では、白の内側と緑の外側の灰色のボックスについて説明しています。

Screenshot of color picker

回避策を見つけました。それは、ボックス(灰色の枠と緑のコンテンツ)がサイズ0に押しつぶされるように十分に高いパディングを設定することです。しかし、それは本当にハックで、Firefoxであまり良く見えません。

30
BrianFreud

WebKitには 特別なCSSセレクター があり、フォームコントロールのカスタマイズに使用できますが、公式ではありません。
WebKitの将来のアップデートは、おそらくそれを破るでしょう。

本番には使用しないでください!!

しかし、個人的なプロジェクトのためにそれを自由に遊んでください:)

方法1

Webkit固有のセレクターを使用して、入力の色のない部分をほとんど非表示にします。

input[type="color"] {
        -webkit-appearance: none;
        border: none;
        width: 32px;
        height: 32px;
}
input[type="color"]::-webkit-color-swatch-wrapper {
        padding: 0;
}
input[type="color"]::-webkit-color-swatch {
        border: none;
}
<input type=color value="#ff0000">

方法2

カラー入力を非表示にします(opacity:0)およびJavaScriptを使用して、ラッパーの背景を入力の値に設定します。

var color_picker = document.getElementById("color-picker");
var color_picker_wrapper = document.getElementById("color-picker-wrapper");
color_picker.onchange = function() {
        color_picker_wrapper.style.backgroundColor = color_picker.value;    
}
color_picker_wrapper.style.backgroundColor = color_picker.value;
input[type="color"] {
        opacity: 0;
        display: block;
        width: 32px;
        height: 32px;
        border: none;
}
#color-picker-wrapper {
        float: left;
}
<div id="color-picker-wrapper">
        <input type="color" value="#ff0000" id="color-picker">
</div>
46
Keishi Hattori

回避策は次のとおりです。

  1. カラーピッカーをラベルで囲みます。
  2. カラーピッカーの可視性をfalseに設定します。
  3. ラベルの背景色をカラーピッカーの値にバインドします。

これで、スタイルラベルが簡単になり、クリックするとカラーピッカーが開きます。コメントで説明したように、ラベルをクリックすると、カラーピッカーが有効になりますJavaScriptなし。これがデフォルトの動作です。

$(document).on('change', 'input[type=color]', function() {
  this.parentNode.style.backgroundColor = this.value;
});
input {
  visibility: hidden;
}

label {
  background-color: black;
  height: 32px;
  width: 32px;
  position: fixed;
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<label><input type="color"></label>

JSFiddle: https://jsfiddle.net/9zhap7rb/3/

9
CodeToad

私はシンプルなソリューションを使用していますが、それほどエレガントではありません。入力をdivでラップし、入力をコンテナより大きくすることができます。その後、必要に応じてコンテナを整形できます。 for属性を持つラベルを使用して、テキスト付きのクリック可能なボタンを作成することもできます。

私は例を作りました:

.input-color-container {
  position: relative;
  overflow: hidden;
  width: 40px;
  height: 40px;
  border: solid 2px #ddd;
  border-radius: 40px;
}

.input-color {
  position: absolute;
  right: -8px;
  top: -8px;
  width: 56px;
  height: 56px;
  border: none;
}

.input-color-label {
  cursor: pointer;
  text-decoration: underline;
  color: #3498db;
}
<div class="input-color-container">
  <input id="input-color" value="#ed6868" class="input-color" type="color">
</div>
<label class="input-color-label" for="input-color">
  I am a clickable label, try me
</label>
5
Henrique Rotava

残念ながら、色の入力は非常に複雑です。ブラウザが異なれば、それらの扱いも異なります。たとえば、Chromeはwidth/height + border-widthに基づいて入力のサイズを変更します。一方、Firefoxは最大値を使用しますwidth/heightborder-widthの。これにより、<input type=color>だけでは等間隔が非常に難しくなります。

ただし、canで行うことは、選択した色自体を除くすべてを削除し、入力の周囲の間隔をより予測可能に処理できるラッパーをスローします。

label.color-picker {
  width: 150px; /* Width of color picker */
  border: 1px solid #ccc; /* Outer border */
  border-radius: 3px; /* Border radius of outer border */
  padding: 5px; /* Space between outer border and color picker */
  background: #fff; /* Color between outer border and color picker */

  display: block; /* Contain color picker within label */
}

label.color-picker > span {
  border: 1px solid #ccc; /* Border around color in color picker */

  display: block; /* Contain color picker within span */
}

label.color-picker > span > input[type=color] {
  height: 10px; /* Height of color picker */

  display: block; /* Avoids space above/below color picker */
  width: 100%; /* Fill available horizontal space */
  border: none; /* Remove browser's border */
  padding: 0px; /* Remove space around color picker in Chrome */
}

/* Chrome styles */
label.color-picker > span > input[type=color]::-webkit-color-swatch-wrapper {
  padding: 0; /* Remove browser's padding around color picker */
}
label.color-picker > span > input[type=color]::-webkit-color-swatch {
  border: none; /* Remove browser's border around color in color picker */
}

/* Firefox styles */
label.color-picker > span > input[type=color]::-moz-color-swatch {
  border: none; /* Remove browser's border around color in color picker */
}
label.color-picker > span > input[type=color]::-moz-focus-inner {
  border: none; /* Remove browser's padding around color in color picker */
  padding: 0; /* Remove browser's padding around color in color picker */
}
<label class="color-picker">
    <span>
        <input type=color value="#ff00ff">
    </span>
</label>
4
0b10011

これは私が最近アートプロジェクトのためにそれをした方法です。私は初心者なので、これがひどく間違っているかどうかを教えてください。

input[type=color]{
        width: 40px;
        height: 40px;
        border: none;
        border-radius: 40px;
        background: none;
}
input[type="color"]::-webkit-color-swatch-wrapper {
        padding: 0;
}
input[type="color"]::-webkit-color-swatch {
        border: solid 1px #000; /*change color of the swatch border here*/
        border-radius: 40px;
}
<input type="color" value="#C899F5">
3
Terran Webb