61

のinput type="color"デフォルトの色は黒です: #000000。

空の値を指定しても...

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

...デフォルトの色は常に黒です。

ユーザーが色を選択できるようにしたいのですが、そうでない場合は、白でさえ色が選択されていないことを意味し#FFFFFFます。

input type="color"デフォルトとして黒を持たないようにする方法はありますか?

ある種の「リスナー」を使用して、ユーザーが初めて色を変更したかどうかを確認できます。そうでない場合は値を無視しますが、Javascript は避けたいと思います。

4

8 に答える 8

26

valueで属性にhexcode を使用して<input type="color">いるときに気づいたことの 1 つは、6 桁でなければならないことです。白に を使用する#fffと、機能しません。でなければなりません#ffffff。

JavaScriptで設定しても同じです。 document.querySelector('input[type="color"]').value = '#fff'動作しません。色は黒のままです。それを機能させるには、使用する必要がありますdocument.querySelector('input[type="color"]').value = '#ffffff'。

注意すべきことがあります。

于 2013-09-26T07:18:19.093 に答える
8

使用値:

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

入力が変更されていないかどうかを知りたい場合は、次のようにすることができます (jQuery を使用):

$(function(){
    $('input').change(function(){
       $(this).addClass('changed');
    })
})

http://jsfiddle.net/j3hZB/

于 2013-02-18T18:40:52.590 に答える
5

編集：あなたの質問を正しく理解したので、回答を更新しました。

W3C 仕様では、属性に色を表す文字列があると定義されvalueていますが、既定の色は定義されていません。なので、デフォルトカラーの実装はブラウザの裁量に任されていると思います。

ただし、WhatWG 仕様はこのメモであなたの質問に答えます。

注:入力タイプ要素が color 状態の場合、常に色が選択されており、値を空の文字列に設定する方法はありません。

さらに、あなたの予想に基づいて、CSS 言語はNULLどの要素にも属性を定義していないため、をデフォルト値としてinput type='color'持つことはできません。NULL

回避策:

回避策は Shadow DOM API にあります。

ここに画像の説明を入力

transparentChrome 開発者ツールを使用して、疑似要素の::-webkit-color-swatchbackground プロパティに色を指定できることがわかりました-

input[type=color]::-webkit-color-swatch 
{ 
    background-color: transparent !important; 
}

上記の CSS の場合、HTML は次のようになります - <input type="color">. ユーザーがデフォルトの色を変更したかどうかを伝えるためのリスナーは必要ありません。transparent値が変更されたかどうかを判断できる NULL カラーとして単純に色を扱うことができます。

FirefoxのShadow DOMから、背景に透明な値を設定するための同様の種類の情報が見つかると確信しています。IE は依然として私たちにとって苦痛です。

于 2013-09-23T16:31:35.687 に答える
1

この問題がクロムでのみ利用可能かどうかはわかりませんが、クロムのクイックフィックスを見つけました. 最初に入力値を #FFFFFF に設定する必要があり、その後デフォルト値に設定すると、黒の代わりにデフォルトの色が表示されます

var element = document.querySelector('input[type="color"]');
element.value = '#FFFFFF'; //remember the hex value must has 7 characters
element.value = element.defaultValue;

それが誰かを助けることを願っています:)

于 2015-12-29T04:34:55.457 に答える
0

私はこの種のソリューションを自分で実装しました。素敵な「透明な」ボタンが表示されます。クリックすると、通常の非表示の入力色がトリガーされます。色がピックアップされると、透明なボタンが非表示になり、入力色が表示されます。

乾杯。

function clickInputColor( button )
{
	$( button ).next().click();
}

function inputColorClicked( input )
{
	$( input ).show();
	$( input ).prev().hide();
}
.inputEmptyColorButton {
	background:url("http://vickcreator.com/panel/images/transparent.png") center repeat;
	width: 50px;
	height: 1.5em;
	vertical-align: bottom;
	border: 1px solid #666;
	border-radius: 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="clickInputColor( this );" class="inputEmptyColorButton"></button>
					<input onchange="inputColorClicked( this );" style="display: none;" type="color" value="" />

于 2018-02-22T16:12:26.683 に答える