Is there a Webkit-specific CSS style that will allow me to control the color/size/style of the box around the color in an input[type=color] ? I'm setting the color and background color of the input already so it looks good with a cross-compatibility polyfill I'm using for older Chrome and Firefox. But now that Chrome actually has a color picker, there's a box around the color which leaves a 1px grey box floating in the middle of the input when both color and background color of the input are set to the same color. Is there some CSS to get rid of it, either by setting that box's width to 0, changing the style to none , or, at worst, setting the color to the same as the color and background color?

In this image, I'm talking about the grey box inside the white and outside the green:

I've found one workaround, which is to set a high enough padding that the box (the grey border and green contents) is squished to size 0. But that's really hacky, and doesn't look very good over in Firefox.

---

WebKit has special CSS selectors you can use to customize form controls but they aren't official.
An update to WebKit in the future will probably break it.

Please don't use it for production!!

But feel free to play with it for personal projects :)

Method 1

Uses webkit-specific selectors to mostly hide the non-colored part of the input.

input[type="color"] {
	-webkit-appearance: none;
	border: none;
	width: 32px;
	height: 32px;
}
input[type="color"]::-webkit-color-swatch-wrapper {
	padding: 0;
}
input[type="color"]::-webkit-color-swatch {
	border: none;
}

<input type=color value="#ff0000">

---

a good workaround is to:

1.wrap your color picker in a label. 2.set the color picker's visibility to false. 3.bind the label's background color to the value of the color picker.

now, you have an easy to style label that when clicked, opens your color picker :

JSFiddle

<label id="test_wrapper"><input id="inp" type="color"></label>

---

I am using a simple solution, but not so elegant, I guess. You can wrap the input with a div and make the input bigger than the container, after that you can shape the container as you want. You can also use a label with a for attribute to create a clickable button with some text.

I have made an example:

.input-color-container {
  position: relative;
  overflow: hidden;
  width: 40px;
  height: 40px;
  border: solid 2px #ddd;
  border-radius: 40px;
}

.input-color {
  position: absolute;
  right: -8px;
  top: -8px;
  width: 56px;
  height: 56px;
  border: none;
}

.input-color-label {
  cursor: pointer;
  text-decoration: underline;
  color: #3498db;
}

<div class="input-color-container">
  <input id="input-color" value="#ed6868" class="input-color" type="color">
</div>
<label class="input-color-label" for="input-color">
  I am a clickable label, try me
</label>

链接地址: http://www.djcxy.com/p/75528.html

上一篇: 删除文字输入的内部阴影

下一篇: Webkit CSS来控制围绕输入颜色的框[type = color]？