时间戳

首页 > 解决方案 > How to set border radius for color tag's color picker?

css - How to set border radius for color tag's color picker?

问题描述

I have tried many ways and searched a lot. I still don't know how to set border-radius for the color picker.

PS: I'm talking about border-radius of the color picker

input[type="color"]:first-child
{
padding:0;
margin:0;
border:none;
box-shadow:none;
border-radius:100px;
background:none;
margin-bottom:20px;
}

input[type="color"]:nth-child(2)
{
padding:0;
margin:0;
border:none;
box-shadow:none;
border-radius:100px;
background:#f0bc12;
outline:none;
}

input[type="color" i]
{
border-radius:4px; 
border:none;
height:40px;  
width:100px; 
display:block;
}
<input type="color" name="color" value="#37a131">

<input type="color" name="color" value="#f0bc12">

  1. I can remove the default background for the color tag but I can't set border-radius for the color picker (see 1st output)
  2. I can change the background of the color tag but I can't remove the border of the color picker (see 2nd output)

Is this possible?

I'll appreciate any help thanks.

标签： csshtml

解决方案

尝试这个：

input[type="color"]:first-child {
  padding: 0;
  margin: 0;
  border: none;
  box-shadow: none;
  border-radius: 100px;
  background: none;
  margin-bottom: 20px;
}

input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

input[type="color"]::-webkit-color-swatch {
  border: none;border-radius:4px;
}

input[type="color"]:nth-child(2) {
  padding: 0;
  margin: 0;
  border: none;
  box-shadow: none;
  border-radius: 100px;
  background: #f0bc12;
  outline: none;
}

input[type="color" i] {
  border-radius: 4px;
  border: none;
  height: 40px;
  width: 100px;
  display: block;
}

演示：http: //jsfiddle.net/1os9250n/2/

推荐阅读