html5定义一个选择框,HTML5一款黑白色调的自定义下拉列表选择框

CSS

语言：

CSSSCSS

确定

*,

*:after,

*:before {

box-sizing: border-box;

}

html {

box-sizing: inherit;

background: -webkit-linear-gradient(right, #8e9eab, #eef2f3);

background: linear-gradient(to left, #8e9eab, #eef2f3);

}

body {

margin: 10% auto;

text-align: center;

font-size: 12px;

}

.select {

position: relative;

display: block;

margin: 0 auto;

width: 100%;

max-width: 325px;

color: #cccccc;

vertical-align: middle;

text-align: left;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

-webkit-touch-callout: none;

}

.select .placeholder {

position: relative;

display: block;

background-color: #393d41;

z-index: 1;

padding: 1em;

border-radius: 2px;

cursor: pointer;

}

.select .placeholder:hover {

background: #34383c;

}

.select .placeholder:after {

position: absolute;

right: 1em;

top: 50%;

-webkit-transform: translateY(-50%);

transform: translateY(-50%);

font-family: 'FontAwesome';

content: '\f078';

z-index: 10;

}

.select.is-open .placeholder:after {

content: '\f077';

}

.select.is-open ul {

display: block;

}

.select.select--white .placeholder {

background: #fff;

color: #999;

}

.select.select--white .placeholder:hover {

background: #fafafa;

}

.select ul {

display: none;

position: absolute;

overflow: hidden;

width: 100%;

background: #fff;

border-radius: 2px;

top: 100%;

left: 0;

list-style: none;

margin: 5px 0 0 0;

padding: 0;

z-index: 100;

}

.select ul li {

display: block;

text-align: left;

padding: 0.8em 1em 0.8em 1em;

color: #999;

cursor: pointer;

}

.select ul li:hover {

background: #4ebbf0;

color: #fff;

}