Input type color styling

Question

I have a small question, since I\'m not too good at CSS i want to know if there any way I can recreate such a nice input[type=color] element\'s style? I mean not everything on t

Answer 1

Note: for Firefox you would need to use -moz-color-swatch There is no color-swatch-wrapper equivalent on Firefox.

You need to create a new rule, since it's not possible mix vendors prefixed rules (see Why isn't it possible to combine vendor-specific pseudo-elements/classes into one rule set? )

i.e. add

#primary_color::-moz-color-swatch {
    border: none;
    border-radius: 100%;
}

For Firefox to look like what you expect, seems you also need to add padding: 0px; on the #primary_color section