の色の周りのボックスの色/サイズ/スタイルを制御できるWebkit固有のCSSスタイルはありinput[type=color]ますか？
入力の色と背景色をすでに設定しているので、古いChromeとFirefoxで使用している相互互換性のあるポリフィルで見栄えがします。
Chromeに実際にカラーピッカー1pxが追加されたので、入力の色と背景色の両方が同じ色に設定されている場合、入力の中央に灰色のボックスが浮かぶように、色の周りにボックスがあります。
noneボックスの幅を0に設定するか、スタイルをに変更するか、最悪の場合、色を色や背景色と同じに設定することで、それを取り除くためのCSSはありますか？
この画像では、白い領域の周りと緑の外側の灰色のボックスについて話しています。
回避策の1つを見つけました。それは、ボックス（灰色の境界線と緑色の内容）がサイズ0に押しつぶされるように、十分に高いパディングを設定することです。
WebKitには、フォームコントロールをカスタマイズするために使用できる特別なCSSセレクターがありますが、公式ではありません。
将来のWebKitのアップデートは、おそらくそれを壊すでしょう。
制作には使用しないでください!!
しかし、個人的なプロジェクトのためにそれで自由に遊んでください:)
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">カラー入力（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>良い回避策は次のとおりです。
これで、クリックするとカラーピッカーが開く簡単なスタイルのラベルができました。コメントで説明されているように、ラベルをクリックすると、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/
私は単純な解決策を使用していますが、それほどエレガントではないと思います。入力を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>これが最近のアートプロジェクトでのやり方です。私は初心者なので、これがひどく間違っていた場合はお知らせください。
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">残念ながら、色の入力は非常に厄介です。ブラウザが異なれば、それらの扱いも異なります。たとえば、Chromeはwidth/ height+に基づいて入力のサイズを決定しますborder-width。一方、Firefoxは最大のwidth/heightとを使用しborder-widthます。これは、それ自体で、等間隔を非常に困難にし<input type=color>ます。
ただし、選択した色自体を除くすべてを削除し、その周りにラッパーをスローして、入力の周囲の間隔をより予測どおりに処理できるようにすることができます。
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>@Henrique Rotavaからのアプローチに基づいて、隠れたオーバーフローと負のマージンを活用して、CSSマークアップの少ないより柔軟なラッパーを作成できます。基本的に、ピッカーは十分に大きくなり、ラッパーがクリップしたときに中央だけが表示されるように十分に伸びます。
ラッパーはとを宣言する必要がwidthあります。heightこれは、ではなくラッパーのスタイルを設定するほとんどのユースケースに適していますinput。そうしないと、要素は表示されません。他のすべてのフォーマットは、ラッパーのオプションです。
input[type='color'] {
padding: 0;
width: 150%;
height: 150%;
margin: -25%;
}
.cp_wrapper {
overflow: hidden;
width: 2em;
height: 2em;
/* optional formatting below here */
border-radius: 50%;
box-shadow: 1px 1px 3px 0px grey;
margin: 1em;
}<div class="cp_wrapper">
<input type="color" name="cp_1" value="#ff8888" />
</div>
<div class="cp_wrapper">
<input type="color" name="cp_2" value="#88ff88" />
</div>
<div class="cp_wrapper">
<input type="color" name="cp_3" value="#8888ff" />
</div>これが素敵な小さな色入力デザインです。デフォルトのフレームを無効にして-webkit-appearance: noneから、目的のスタイルを指定できます。これが役立つことを願っています:)
input[type="color"] {
-webkit-appearance: none;
width: 30px;
height: 30px;
border: 0;
border-radius: 50%;
padding: 0;
overflow: hidden;
box-shadow: 2px 2px 5px rgba(0,0,0,.1);
}
input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0;
}
input[type="color"]::-webkit-color-swatch {
border: none;
}<input type=color value="#A4A4A4">onInputここで言及されていない別のメソッドは、入力要素自体に設定され、要素のイベントハンドラーによって直接制御されるカスタムプロパティ（変数）を使用します。CSSattrは現在ユニットレスであるため、タイプの変数を作成してcolor使用する以外に選択肢はありません。
少し面倒ですが、HTMLはまだ単一要素です。
input[type=color]{
--size: 100px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0;
border: 0;
padding: 0;
width: 0;
height: 0;
background: white;
margin: calc(var(--size)/-2) 0 0 calc(var(--size)/-2);
}
input[type=color]::before{
content: '';
display: block;
background: var(--value);
text-transform: uppercase;
width: var(--size);
height: var(--size);
margin: calc(var(--size)/2) 0 0 calc(var(--size)/2);
border: 2px black;
position: relative;
z-index: 1;
border-radius: 50%;
cursor: pointer;
}<input type="color" value="#ff0000" style="--value:#ff0000" oninput="this.style.setProperty('--value', this.value)" />attr() タイプの構文（まだ完成していません）CSSには非常に優れた新機能valueがあり、入力の動的プロパティにアクセスして疑似要素で使用できるため、この状況で大いに役立ちます。どうやらtype="color"疑似要素を許可します。
これを書いている時点では、入力の疑似要素のように効果的に使用できる内で指定できるこの機能をサポートしているブラウザはなく、完全なカスタマイズが可能です。typeattr()attrbackground
input[type=color]{
appearance: none;
margin: 0;
border: 0;
padding: 0;
width: 0;
height: 0;
margin: -100px 0 0 -100px;
}
input[type=color]::before{
content: '';
display: block;
background: white;
background: attr(value color, white);
width: 200px;
height: 200px;
margin: 100px 0 0 100px;
border: 2px black;
position: relative;
z-index: 1;
border-radius: 50%;
}<input type="color" value="#ff0000" />この解決策は、現在選ばれている服部圭史よりも優れていると思います。服部圭司のソリューションでは、選択した色の周りにくすんだ色が残り、幅/高さを設定する必要があり、境界線を追加するとうまく機能しません。
私は次の解決策がよりうまく機能することを発見しました。
input[type="color"] {
-webkit-appearance: none;
position:relative;
}
input[type="color"]::-webkit-color-swatch {
position:absolute;
top:-1px;
left:-1px;
right:-1px;
bottom:-1px;
box-sizing: border-box;
border:1px solid transparent;
}<input type="color" value="#ff0000">必要に応じて境界線を追加できます。
input[type="color"].withborder {
-webkit-appearance: none;
position:relative;
border:1px solid #000;
}
input[type="color"].withborder::-webkit-color-swatch {
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
box-sizing: border-box;
border:1px solid transparent;
}<input type="color" class="withborder" value="#ff0000">必要に応じて、input [type="color"]に背景を追加できます。::-webkit-color-swatchの0pxを変更する必要があります。
input[type="color"].withborder {
-webkit-appearance: none;
position:relative;
border:1px solid #000;
background:#bbb;
}
input[type="color"].withborder::-webkit-color-swatch {
position:absolute;
top:4px;
left:4px;
right:4px;
bottom:4px;
box-sizing: border-box;
border:0px solid transparent;
}<input type="color" class="withborder" value="#ff0000">IEを除いて、これは機能する可能性があります。
input[type=color]{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0;
border: 0;
padding: 0;
/*input[type=color] double the scale and clip the offset*/
-webkit-transform: scale(2);
transform: scale(2);
-webkit-clip-path: inset(25%);
clip-path: inset(25%);
}
input[type=color]:before{
content: attr(value);
text-shadow:.1em .1em #fff;
font-size:.5em;
width:50%;height:50%;
left:25%;top:25%;
text-align:center;
position:absolute;
background-image: url('data:image/gif;base64,R0lGODlhBgADAPABAICAgAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJFAABACwAAAAABgADAAACBkxggGfMBQAh+QQJFAABACwAAAAABgADAAACBQximHZbACH5BAUUAAEALAAAAAAGAAMAAAIFRGKXiVoAOw==');
}<input type="color" value="#ff0000" />
<input type="color" value="#00ff00" />
<input type="color" value="#0000ff" />私の方法：
<div class="user__colors">
<label><input type="color"/></label>
</div>
input {
background-color: transparent;
border: none;
position: relative;
width: 80px;
height: 12px;
&:after {
position: absolute;
content: '';
display: block;
width: 100%;
height: 100%;
background: url(../img/color-palette.jpg) repeat-y 0 0;
background-size: contain;
top: 0;
border-radius: 3px;
}
}
そしてそれはこのように見えます：http： //prntscr.com/gloozc
ただし、Ctl + F5を押すと、しばらくの間元の入力が表示されます。