自定义的拾色器
拾色器长这样，用input的话都是默认样式，长这样的话怎么做
达令说浏览 705回答 1
1回答
-
狐的传说
如果非要一样的话可以选择用div做，把所有要的颜色值放到一个数组里，每个小div获取数组中对应的颜色值，这个会比较麻烦，但是能做出来`<!DOCTYPE html><html><head><meta charset="utf-8"><title>color</title><style media="screen">.box{ width: 200px; height: 200px; border: 1px solid red; margin:300px auto; position: relative;} .colorMenu{ width: 60px; height: 27px; float:left; position: relative; text-indent: 5px; cursor: default; line-height: 27px; font-size: 14px; } .colorMenu:hover{ background: #d8e1f2; cursor: default; font-size: 14px; } #triangle-top{ width:0px; height:0px; float: left; border:8px solid; position: absolute; top: -5px; right: 5px; border-color:#000 transparent transparent transparent; border-style:solid dashed dashed dashed; } .container{ width: 155px; height: 350px; border: 1px solid green; position: absolute; top:27px; display: none; } .container div.preColor{ width: 10px; height: 10px; margin-left: 5px; margin-top: 5px; background: blue; float: left; margin-bottom: 5px; } .container div.preColor:hover{ border: 1px solid orange; width: 8px; height: 8px; } .arrColor div{ width: 10px; height: 12px; margin-left: 5px; background: blue; float: left; } .container div.txt{ background: #eee; width: 100%; height: 25px; line-height: 25px; text-indent: 10px; font-size: 14px; cursor: default; } .clear{ clear: both; } .normColor{ width: 100%; height: 15px; border-bottom: 1px solid #d4d4d4; margin: 2px auto; } .normColor div{ width: 10px; height: 10px; margin-left: 5px; margin-top: 2px; background: green; float: left; } .moreColor{ width: 100%; height: 25px; text-indent: 10px; line-height: 25px; font-size: 14px; cursor: default; position:absolute; } input.moreColor{ width: 150px; opacity: 0; } input.moreColor:hover{ background: #d8e1f2; cursor: default; } .color:hover{ width: 8px; height: 10px; border: 1px solid #f29436; }</style></head><body><div class="box"> <div class="colorMenu">填充<p id='triangle-top'></p></div> <div class="container"> <div class="preColor color"></div> <div class="preColor color"></div> <div class="preColor color"></div> <div class="preColor color"></div> <div class="preColor color"></div> <div class="preColor color"></div> <div class="preColor color"></div> <div class="preColor color"></div> <div class="preColor color"></div> <div class="preColor color"></div> <div class="arrColor"> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> </div> <div class="clear"></div> <div class="txt">标准颜色</div> <div class="normColor"> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> <div class="color"></div> </div> <div class="moreColor"> 更多颜色 </div> <input type="color" class="moreColor"> </div></div></body></html><script src="http://ajax.googleapis.com/aj...<script type="text/javascript">$(function(){$(".colorMenu").bind("click",function(e){ var arr = [ "#ffffff","#000000","#1f497d","#9bbb59","#969696","#4f81bd","#c0504d","#8064a2","#4bacc6","#f79646", "#ebebeb","#7e7e7e","#e7e9ec","#eff3ea","#efefef","#e9edf4","#f4e9e9","#edeaf0","#e9f1f5","#fdefe9", "#d7d7d7","#696969","#cccfd7","#dee7d1","#dddddd","#d0d8e8","#e8d0d0","#d8d3e0","#d0e3ea","#fcddcf", "#c2c2c2","#595959","#abb1bf","#cbdab5","#c9c9c9","#b2c1db","#dcb3b2","#c0b8ce","#b1d2df","#fac9b0", "#afafaf","#454545","#7f8aa3","#b5cb90","#b2b2b2","#8ca5cc","#cf8c8b","#a495ba","#8bc0d3","#f9b289", "#9b9b9b","#303030","#1a3f6d","#88a44d","#838383","#4471a6","#a94543","#70578e","#4197ae","#da833d", "#868686","#191919","#14335a","#71893f","#6d6d6d","#385d8a","#8c3836","#5c4776","#357d91","#866d31", "#c00000","#ff0000","#ffc000","#ffff00","#92d050","#00b050","#00b0f0","#0070c0","#002060","#7030a0" ]; $.each(arr,function(index,element){ $(".color").eq(index).css("background",arr[index]); }); $(".container").show(); e.stopPropagation();});$(document).click(function(){ $(".container").hide();});});</script>
随时随地看视频慕课网APP
相关分类
JavaScript