<div class="dropdown-selection"> <select class="select-option"> <option value="file">{{t.file}}</option> <option value="hot">{{t.hot}}</option> <option value="mold">{{t.moldid}}</option> <option value="sign">{{t.register}}</option> <option value="time">{{t.time}}</option> </select> </div>
.dropdown-selection { display: block; width: 220px; margin: 0 auto; height: 60px; line-height: 60px; font-size: 28px; box-sizing: border-box; cursor: pointer; position: relative; &::after { content: ' '; position: absolute; right: 6px; top: 50%; margin-top: -5px; width: 0px; height: 0px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #fff; font-size: 0px; line-height: 0px; } .select-option { -webkit-appearance: none; -moz-appearance: none; appearance: none; position: relative; outline: none; border: 0 none; position: relative; padding: 0 0 0 5px; width: 100%; color: #fff; background: none; background-color: transparent; font-size: 28px; z-index: 99; overflow: hidden; } &.back-after { width: 240px; margin: 0 30px 0 0; &::after { border-top-color: #666; } .select-option { color: #666; } } &.filter-search { width: 150px; margin: 0; } }