在Google Chrome中禁用<input type =「color」>的顏色選擇器

在谷歌瀏覽器中，<input type="color">創建一個內部帶有大色條的輸入，默認情況下打開一個顏色選擇器（看起來像是操作系統相關的， Windows皮膚）。我使用的是全球範圍內的自定義顏色拾取掛鉤到type="color"它看起來像這樣在大多數瀏覽器：在Google Chrome中禁用<input type =「color」>的顏色選擇器

text input with colored borders

但在Chrome它看起來像這樣：

solid colored bar with padding and a colored border

如果你已經從來沒有見過它，一個裸骨的看起來像這樣（Windows 7 64位Google Chrome版本22.0.1229.79米）：

enter image description here

自定義colorpicker覆蓋默認的一個很好，但問題是它在Chrome中顯示的方式。另一個問題是，我似乎無法清除該值（已嘗試js），默認值始終爲#000000，並且不能設置爲空。

如果我不想要這種行爲，我不應該使用type="color"，但有時候我覺得Chrome的用戶界面有點太過分了。改變所有的輸入type s並不是我期待的，我也不積極，應用程序正在與他們做什麼，所以我最終可能會打破別的東西。我有類似的日期選擇問題。

有什麼辦法可以在Chrome中改變這種行爲，所以我可以有一個普通的文本字段？ JavaScript/jQuery是一個選項，但是如果它可以用CSS -webkit規則來完成，那麼規則會很棒。

來源

2012-10-03 Wesley Murch

從來不知道有'的東西，比如'TYPE =「顏色」：d編輯：順便說一句我剛試過，但我無法得到它的工作，您使用的是哪個版本？ –

谷歌瀏覽器版本22.0.1229.79 m：http://jsfiddle.net/sfBK8/ –

我想沒有辦法，你可以把它當作一個文本框，除非和直到用戶瀏覽器像我一樣老（但作爲開發人員我不要升級到最新）.. –

你不應該在這種情況下使用type =顏色。根據標準，輸入[type = color]不能有空值。

If the value of the element is a valid simple color, then set it to the value of the element converted to ASCII lowercase; otherwise, set it to the string "#000000".

來源

2012-10-07 01:08:28

因爲沒有研究，我的過錯，謝謝澄清！ –

在這裏，我提出了一個錯誤（功能要求）的標準，引用這個問題https://www.w3.org/Bugs/Public/show_bug.cgi?id=21996 – naktinis

對於顯示的問題，嘗試覆蓋默認的用戶代理樣式：http://jsfiddle.net/ngBpA/

input[type="color"] { 
    -webkit-appearance: textfield; 
} 

input[type="color"]::-webkit-color-swatch-wrapper { 
    display: none; 
} 

input[type="color"]::-webkit-color-swatch { 
    display: none; 
}

我假設你的插件會自動調整框。

用戶代理樣式表：http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

來源

2012-10-03 04:31:11

我知道必須有'-webkit'規則，讓我試試看看它是如何工作的，謝謝你的信息。主要問題是無法清除價值，但這可以解決一些醜陋。 –

這確實對顯示方面有幫助，但由於某些原因':: - webkit-color-swatch'不需要，並且以某種方式使插件的colorpicker輸入非常寬（這只是'type =「text」'，奇怪）。還有很多額外的填充我無法刪除，但看起來更好。 –

在Google Chrome中禁用<input type =「color」>的顏色選擇器

回答

相關問題