纯css3 select,CSS3 纯CSS跨浏览器SELECT选择框自定义设计

CSS

语言：

CSSSCSS

确定

.select {

position: relative;

height: 47.5px;

background: white;

box-shadow: 0 3px 0 rgba(0, 0, 0, 0.05);

}

.select:after {

content: '';

position: absolute;

top: 0;

width: 0;

height: 0;

right: 10px;

bottom: 0;

margin: auto;

border-style: solid;

border-width: 5px 5px 0 5px;

border-color: #a52c2c transparent transparent transparent;

pointer-events: none;

}

.select:before {

width: 30px;

position: absolute;

top: 1px;

right: 1px;

bottom: 1px;

background: whitesmoke;

content: '';

pointer-events: none;

}

.select:hover:before {

background: #ffcfcf;

}

.select select {

font-size: 14px;

border: none;

box-shadow: none;

border-radius: 0;

background: transparent;

height: 100%;

width: 100%;

cursor: pointer;

outline: none;

padding-right: 35px;

padding-left: 15px;

border: 1px solid #a52c2c;

-moz-appearance: none;

-webkit-appearance: none;

}

.select select:-moz-focusring {

color: transparent;

text-shadow: 0 0 0 #000;

}

.select select::-ms-expand {

display: none;

}

.select select:focus {

border-color: #63ffb4;

}

@media all and (min-width: 0\0) and (min-resolution: 0.001dpcm) {

.select select {

padding-right: 0;

}

.select:after,

.select:before {

display: none;

}

}

.container {

width: 420px;

margin: auto;

top: 50%;

position: relative;

transform: translate3d(0, -50%, 0);

}

body,

html {

width: 100%;

height: 100%;

margin: 0;

background: #d44747;

}