css 在线颜色选择,CSS3 Only Color Picker 颜色选择器

CSS

语言：

CSSSCSS

确定

* {

-moz-box-sizing: border-box;

box-sizing: border-box;

}

html {

display: table;

width: 100%;

height: 100%;

}

body {

text-align: center;

display: table-cell;

vertical-align: middle;

padding: 1em;

background: #f5f5f5;

font: 100%/1.2 "Helvetica Neue";

font-weight: 200;

}

.colorPicker {

margin-top: 1em;

font-size: 0.875em;

text-align: center;

display: inline-table;

width: 30em;

background: #fff;

padding: 2px;

border-radius: 0.35em;

box-shadow: 0 0.5em 1.5em rgba(0, 0, 0, 0.15);

}

.colorPicker label {

-webkit-transition: all 0.2s ease-in-out;

transition: all 0.2s ease-in-out;

display: table-cell;

cursor: pointer;

vertical-align: middle;

padding: 0.5em 1em;

text-transform: capitalize;

letter-spacing: -0.5em;

color: transparent;

opacity: 0.35;

width: 1%;

background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1));

background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1));

}

.colorPicker label.red {

background-color: #ff3e05;

}

.colorPicker label.orange {

background-color: #ff8d05;

}

.colorPicker label.yellow {

background-color: #ecca05;

}

.colorPicker label.green {

background-color: #40af04;

}

.colorPicker label.blue {

background-color: #057fff;

}

.colorPicker label.indigo {

background-color: #7500ca;

}

.colorPicker label.violet {

background-color: #cc6fcc;

}

.colorPicker label:first-of-type {

border-radius: 0.25em 0 0 0.25em;

}

.colorPicker label:last-of-type {

border-radius: 0 0.25em 0.25em 0;

}

.colorPicker label:hover {

opacity: 1;

color: #fff;

letter-spacing: normal;

}

.colorPicker input {

display: none;

}

.colorPicker input:checked + label {

width: 90%;

opacity: 1;

color: #fff;

letter-spacing: normal;

}