[英]How to change the arrow icon from a select list
You can use appearnace: none
CSS property, with ::after
selector.您可以使用
appearnace: none
CSS 属性,带有::after
选择器。 You can use custom symbol, inside ::after
using content
property.您可以在
::after
使用content
属性后使用自定义符号。
div { position: relative; float: left; min-width: 200px; margin: 50px 33%; } div::after { content: '>'; font: 17px "Consolas", monospace; color: #333; transform: rotate(90deg); right: 15px; top: 18px; padding: 0 0 2px; position: absolute; pointer-events: none; } div select { appearance: none; -moz-appearance: none; -webkit-appearance: none; display: block; width: 100%; max-width: 320px; height: 50px; float: right; margin: 5px 0px; padding: 0px 24px; font-size: 16px; background-color: #ffffff; }
<div> <label> <select> <option selected> Select Box </option> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> </label> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.