HTML5 input type= "color" border pseudo-class effect

HTML5 provides a new type for input: color

<input type= "Color" value= "#999" id= "Color" >

Clicking will pop up the color to modify the popup, but cannot modify the color transparency

After clicking on the switch color, the effect is as follows

The style is ugly, it's actually a two-tier Div, and Chrome provides two pseudo-classes to control them.

1 #color {Border: 0;} 2 ::-webkit-color-swatch-wrapper {Background-color:#ffffff;} 3 ::-webkit-color-swatch {position: relative;} 4 /* Description */5::-webkit-color-swatch-wrapper This is the outer container. 6::- Webkit-color-swatch This is the internal color button, changing the color will change

The effect is as follows, the outer layer is invisible

The problem comes again, after changing the color, there will be a box

Set Outline:none; it's okay.

HTML5 input type= "color" border pseudo-class effect