首页 > 其他分享> > css+js+hmtl写一个简单的颜色选择插件

css+js+hmtl写一个简单的颜色选择插件

2021-09-07 14:00:23 作者：互联网

最后的效果图如下：（demo下载链接）

完整实例：

<!DOCTYPE html>
<html>
<head>
<title></title>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="css/colpick.css" type="text/css" />
	<script src="js/jquery.min.js"></script>
	<script src="js/colpick.js"></script>
	<style>
	.ColorSlect {
		width:80px;
		height:30px;
		font-size:14px;
		text-align:left; 
		padding-left: 5px;
		border: solid 1px #80b3ff;
		border-right-width: 80px;
		border-right-color:#80b3ff;
		border-radius: 4px;
		outline-color: #5d90d6;
	}
	</style>
	<script>
		$(function(){
			var color_value ='cc3d33'; 
			$('#PickerID').val('# ' + color_value);
			$('#PickerID').css('border-right-color','#'+color_value);
			$('#PickerID').colpick({
				layout:'hex',
				colorScheme:'dark',
				color:color_value,
				submit:0,
				onChange:function(hsb,hex,rgb,el,bySetColor) {
					$(el).css('border-right-color','#'+hex);
					if(!bySetColor) $(el).val('# '+hex);
				}
			}).keyup(function(){
				$(this).colpickSetColor(this.value);
			});
		});
	</script>
</head>

<body>
<div>
	<input type="text" id="PickerID" class = "ColorSlect">
</div>
</body>
</html>

标签：插件,right,color,hmtl,hex,value,js,border,css
来源： https://blog.csdn.net/m0_37806005/article/details/120156241