在设计网页时,下拉框是一个非常常见的元素,而箭头是其不可或缺的一部分。默认情况下,大多数浏览器的下拉框箭头都是黑色或浅灰色,与网页主题不一致可能会影响整体美观度。本文将介绍如何通过CSS样式来改变下拉
html <p>下拉框箭头颜色</p> <select id="dropdown"> <option>选项一</option> <option>选项二</option> <option>选项三</option> </select>
css pre { background: #f8f8f8; padding: 10px; border-radius: 5px; overflow-x: auto; font-size: 14px; font-family: monospace; } select { background: #fff; color: #555; font-size: 16px; font-weight: 500; padding: 10px 20px; border: none; border-radius: 5px; -webkit-appearance: none; -moz-appearance: none; appearance: none; position: relative; } select::-ms-expand, select::after { content: ""; display: inline-block; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #555; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); } select::-ms-expand { color: transparent; }
粉丝
0
关注
0
收藏
0