html 菜单 下拉 三角,html – CSS – 将下拉箭头更改为unicode三角形

也许是这样？

*,

*:before,

*:after {

box-sizing: border-box;

}

* {

padding: 0;

margin: 0;

}

form {

padding: 1rem;

max-width: 400px;

margin: 1em auto;

}

.select {

height: 40px;

width: 100%;

overflow: hidden;

position: relative;

border-radius: 3px;

margin-bottom: 1em;

}

.select:after {

content: "▼";

padding: 12px 8px;

position: absolute;

right: 10px;

top: 0;

z-index: 1;

text-align: center;

width: 10%;

height: 100%;

pointer-events: none;

}

.select__field {

height: 40px;

width: 100%;

padding: 5px 15px;

color: #616263;

background-color: #ececec;

border: 1px solid #e3e3e3;

outline: none;

font-size: 16px;

-webkit-appearance: none;

/* for webkit browsers */

-moz-appearance: none;

/* for firefox */

appearance: none;

/* for modern browsers */

}

/* remove default caret for ie */

.select__field::-ms-expand {

display: none;

}

.select__field:focus:invalid {

border-color: #FD6347;

}

.select__field:required:valid {

border-color: #006400;

}

.btn-submit {

color: #fff;

display: block;

padding: 15px;

text-transform: uppercase;

background: #535C69;

width: 100%;

border: none;

border-radius: 3px;

}

Choose option ...

Option 1

Option 2

Option 3

Option 4

Option 5

Option 6

Submit