Question

如果您使用的是Gmail，则表示您可以更改标签的颜色。没有太多的颜色选项，我也想在我的网络应用程序中有类似的东西。即使是带有某些颜色的<select>也会很棒。 jQuery ColorPicker提供多种颜色可供选择，我不需要。

您是否了解与Gmail标签颜色选择器类似的内容？

Answer 1

Really Simple Color Picker怎么样？（Demo）

Answer 2

我开发了一个基于HTML <select>的简单颜色选择器：jquery-simplecolorpicker

内联模式：

inline

选择器模式：

picker

在线演示：http://plnkr.co/edit/VVclW0?p=preview

Answer 3

您也可以查看

color picker and samples

Answer 4

请参阅我的跨浏览器兼容Color Selector （颜色选择器）。您可以使用我的颜色选择器而不是＆lt; input type =“color”＆gt;如果你想在旧的网络浏览器中打开你的网页，那不支持HTML5，例如IE6。

<!--<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">-->
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Color Selector</title>
	<meta name="author" content="Andrej Hristoliubov anhr@mail.ru">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	
<link rel="stylesheet" href="https://rawgit.com/anhr/ColorSelector/master/ColorSelector.css" type="text/css">		
	<script type="text/javascript" src="https://rawgit.com/anhr/ColorSelector/master/Common.js"></script>
	<script type="text/javascript" src="https://rawgit.com/anhr/ColorSelector/master/ColorSelector.js"></script>
	
</head>
<body>
	
	<p>
	Your browser does not supports HTML5 if you do not see the HTML5 color selector here: <input type="color">
	Instead you see a text input field.
	</p>
	<hr>
	My Color Selectors:
	<p>
		<input id="colorSelector1">
		<script>
			colorSelector.Create("black", function(selectedColor){
					consoleLog("selectedColor = " + selectedColor);
					var elementSelectedColor = document.getElementById("SelectedColor1")
					//elementSelectedColor.innerText = selectedColor;//Uncompatible with FireFox
					elementSelectedColor.innerHTML = selectedColor;
					elementSelectedColor.style.background = selectedColor;
					elementSelectedColor.style.color = invertHex(colourNameToHex(selectedColor));
				}
				, "colorSelector1"
			);
		</script>
		Selected color: <span id="SelectedColor1"></span>
	</p>
	<p>
		<input id="colorSelector2">
		<script>
			colorSelector.Create("#ffffff", function(selectedColor){
					consoleLog("selectedColor = " + selectedColor);
					var elementSelectedColor = document.getElementById("SelectedColor2")
					//elementSelectedColor.innerText = selectedColor;//Uncompatible with FireFox
					elementSelectedColor.innerHTML = selectedColor;
					elementSelectedColor.style.background = selectedColor;
					elementSelectedColor.style.color = invertHex(colourNameToHex(selectedColor));
				}
				, "colorSelector2"
			);
		</script>
		Selected color: <span id="SelectedColor2"></span>
	</p>
	<hr>
	Have a job for me? Please read <a href='../AboutMe/' target="_blank">About Me</a>.
</body>
</html>

另请参阅我的Color Selector

示例

javascript颜色选择器

4 个答案: