拾色器长这样，用input的话都是默认样式，长这样的话怎么做

如果非得跟这个一样的估计很困难毕竟有的别的公司自己开发的你可以试试找下插件说不定可找到 jQuery颜色选择插件：evol.colorpicker 这个挺接近的

自定义的拾色器

@伐木北山的答案很接近了，但是如果非要一样的话可以选择用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>
`

自定义的拾色器

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？