是否可以在輸入類型中調用預設的顏色調色板而不是標準調色板？

我試圖做一個顏色選擇器，其中的顏色是從標準的內置系統調色板中選擇的。是否可以在輸入類型中調用預設的顏色調色板而不是標準調色板？

是否可以製作我自己選擇的有限顏色集，然後將其用作輸入顏色方法中的調色板？

<!DOCTYPE html> 
    <html> 
    <head> 
    <title>Page Title</title> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
    </head> 
    <body> 

    <!-- CLICK TO CHANGE COLOR --> 
    <input type="color" value="#e73d18"> 

    <!-- Image Credit --> 


    </body> 
    </html>

的style.css：

body { 
    background-image: url(http://gecko.sashaz.com/green_Gecko.jpg)no-repeat; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    margin: 0; 
} 

input { 
    /* removes default styling from input color element */ 

    padding: 0; 
    border: none; 
    /* makes input (color swatch) 100% size of container */ 

    position: absolute; 
    width: 100%; 
    height: 100%; 
    /* mix blend mode makes the color of the swatch alter the image behind it. */ 

    mix-blend-mode: hue; 
    cursor: pointer; 
} 
/* removes default styling from input color element */ 

::-webkit-color-swatch { 
    border: none; 
} 

::-webkit-color-swatch-wrapper { 
    padding: 0; 
} 

::-moz-color-swatch, 
::-moz-focus-inner { 
    border: none; 
} 

::-moz-focus-inner { 
    padding: 0; 
} 
/* Image Credit */ 

a { 
    position: absolute; 
    bottom: 10px; 
    right: 10px; 
    color: skyblue; 
    background: black; 
    display: block; 
    padding: 3px 8px; 
    font-size: 18px; 
    text-decoration: none; 
}

來源

2015-11-07 Alexandra Serebrennikova

_「是有可能使有限的顏色集我自己選擇的，然後用它作爲輸入法的顏色調色板？」 _不能肯定正確解釋的要求？預期的結果是什麼？限制顏色選擇選項？ – guest271314

是的，確切地說，如何限制他們到我的選擇？ –

嘗試限定陣列內接受的顏色，使用onfocus事件，以檢查是否選擇的顏色是有效的，如果不是，SETT顏色#ffffff

var input = document.querySelector("input"); 
 

 
var colors = ["#e73d18", "#cc5522", "#bb7788", "#dd3344"]; 
 

 
input.onfocus = function(e) { 
 
    if (colors.indexOf(this.value) === -1) { 
 
    this.value = "#ffffff"; 
 
    this.focus() 
 
    } 
 
}

body { 
 
    background-image: url(http://gecko.sashaz.com/green_Gecko.jpg)no-repeat; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    margin: 0; 
 
} 
 
input { 
 
    /* removes default styling from input color element */ 
 
    padding: 0; 
 
    border: none; 
 
    /* makes input (color swatch) 100% size of container */ 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    /* mix blend mode makes the color of the swatch alter the image behind it. */ 
 
    mix-blend-mode: hue; 
 
    cursor: pointer; 
 
} 
 
/* removes default styling from input color element */ 
 

 
::-webkit-color-swatch { 
 
    border: none; 
 
} 
 
::-webkit-color-swatch-wrapper { 
 
    padding: 0; 
 
} 
 
::-moz-color-swatch, 
 
::-moz-focus-inner { 
 
    border: none; 
 
} 
 
::-moz-focus-inner { 
 
    padding: 0; 
 
} 
 
/* Image Credit */ 
 

 
a { 
 
    position: absolute; 
 
    bottom: 10px; 
 
    right: 10px; 
 
    color: skyblue; 
 
    background: black; 
 
    display: block; 
 
    padding: 3px 8px; 
 
    font-size: 18px; 
 
    text-decoration: none; 
 
}

<input type="color" value="#e73d18">

可替代地，使用datalist ，onchange事件

var input = document.querySelector("input"); 
 

 
var colors = ["#e73d18", "#cc5522", "#bb7788", "#dd3344"]; 
 

 
input.onchange = function(e) { 
 
    if (colors.indexOf(this.value) === -1) { 
 
    this.value = "#ffffff"; 
 
    this.focus() 
 
    } 
 
}

body { 
 
    background-image: url(http://gecko.sashaz.com/green_Gecko.jpg)no-repeat; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    margin: 0; 
 
} 
 
input { 
 
    /* removes default styling from input color element */ 
 
    padding: 0; 
 
    border: none; 
 
    /* makes input (color swatch) 100% size of container */ 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    /* mix blend mode makes the color of the swatch alter the image behind it. */ 
 
    mix-blend-mode: hue; 
 
    cursor: pointer; 
 
} 
 
/* removes default styling from input color element */ 
 

 
::-webkit-color-swatch { 
 
    border: none; 
 
} 
 
::-webkit-color-swatch-wrapper { 
 
    padding: 0; 
 
} 
 
::-moz-color-swatch, 
 
::-moz-focus-inner { 
 
    border: none; 
 
} 
 
::-moz-focus-inner { 
 
    padding: 0; 
 
} 
 
/* Image Credit */ 
 

 
a { 
 
    position: absolute; 
 
    bottom: 10px; 
 
    right: 10px; 
 
    color: skyblue; 
 
    background: black; 
 
    display: block; 
 
    padding: 3px 8px; 
 
    font-size: 18px; 
 
    text-decoration: none; 
 
}

<label> 
 
    <input list="colors" type="color" value="#e73d18" /> 
 
</label> 
 
<datalist id="colors"> 
 
    <option value="#e73d18"></option> 
 
    <option value="#cc5522"></option> 
 
    <option value="#bb7788"></option> 
 
    <option value="#dd3344"></option> 
 
</datalist>

來源

2015-11-07 15:25:19 guest271314

謝謝。那麼我應該在輸入前在腳本中添加腳本嗎？ –

我剛換了，它的工作原理！非常感謝你的幫助！ –

我可以再問一個問題嗎？如何定位此選擇器，使其在coursor下面彈出，而不是在左上角？ –

我不認爲你可以只用HTML做到這一點，但你絕對可以用JavaScript實現這一目標。退房https://bgrins.github.io/spectrum/ 只顯示調色板看起來像你想要的。

來源

2015-11-07 15:07:03

是否可以在輸入類型中調用預設的顏色調色板而不是標準調色板？

回答

相關問題