在這次的新年活動中，由于要綁定區(qū)服角色娜饵，這里用到了select標(biāo)簽，但是select在不同的瀏覽器中的樣式不同小染，尤其是在蘋果手機中翘瓮，默認(rèn)樣式更是喪心病狂，所以在這里我們必須修改css來令select兼容裤翩。html結(jié)構(gòu)如圖1资盅。
css修改如圖2和圖3。
.custom-select {
? ? ? ? ? ? position: relative;
? ? ? ? ? ? select {
? ? ? ? ? ? ? ? width: 60%;
? ? ? ? ? ? ? ? height: 1.09rem;
? ? ? ? ? ? ? ? margin: 0.31rem auto 0;
? ? ? ? ? ? ? ? padding-left: 3%;
? ? ? ? ? ? ? ? border: 0;
? ? ? ? ? ? ? ? outline: none;
? ? ? ? ? ? ? ? border:1px solid #aaa;
? ? ? ? ? ? ? ? border-radius: 0.31rem;
? ? ? ? ? ? ? ? background:none;
? ? ? ? ? ? ? ? // border: 1px solid transparent;
? ? ? ? ? ? ? ? -webkit-box-sizing: border-box;
? ? ? ? ? ? ? ? -moz-box-sizing: border-box;
? ? ? ? ? ? ? ? box-sizing: border-box;
? ? ? ? ? ? ? ? appearance: none;
? ? ? ? ? ? ? ? -moz-appearance: none;
? ? ? ? ? ? ? ? -webkit-appearance: none;
? ? ? ? ? ? ? ? font-size: 0.5rem;
? ? ? ? ? ? ? ? &:focus {
? ? ? ? ? ? ? ? ? ? outline:none;
? ? ? ? ? ? ? ? ? ? box-shadow: 0 0 1px 3px rgba(217,222,250, 1);
? ? ? ? ? ? ? ? ? ? background-color:transparent;
? ? ? ? ? ? ? ? ? ? color: #222;
? ? ? ? ? ? ? ? ? ? border:1px solid #aaa;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? .custom-select::after {
? ? ? ? ? ? content: "";
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? width: 0px;
? ? ? ? ? ? height: 0px;
? ? ? ? ? ? top: 50%;
? ? ? ? ? ? right: 22%;
? ? ? ? ? ? // margin-top:-0.7rem;
? ? ? ? ? ? border:8px solid #929497;
? ? ? ? ? ? border-width: 8px 5px 8px;
? ? ? ? ? ? border-color: #929497 transparent transparent transparent;
? ? ? ? ? ? z-index: 2;
? ? ? ? ? ? pointer-events:none;
? ? ? ? }
? ? ? ? .custom-select option {
? ? ? ? ? ? font-weight:normal;
? ? ? ? }
? ? ? ? x:-o-prefocus, .custom-select::after {
? ? ? ? ? ? display:none;
? ? ? ? }
溜了溜了
