[英]Change HTML Select arrow background color
I have a select menu with options我有一个带有选项的 select 菜单
In Firefox, it has an "arrow button"在 Firefox 中,它有一个“箭头按钮”
In Chrome/Edge, it doesn't在 Chrome/Edge 中,它没有
How do I make it so that the Firefox "expand menu" button looks like Chrome/Edge?如何使 Firefox“扩展菜单”按钮看起来像 Chrome/Edge?
<select>
<option>Example</option>
<option>Example</option>
<option>Example</option>
<option>Example</option>
</select>
Some linear-gradient
background-image
hacks:一些
linear-gradient
background-image
技巧:
select { /* styling */ background-color: black; color: white; line-height: 1.5em; padding: 0.5em 3.5em 0.5em 1em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; } select.classic { background-image: linear-gradient(45deg, transparent 50%, white 50%), linear-gradient(135deg, white 50%, transparent 50%), linear-gradient(to right, black, black); background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), 100% 0; background-size: 5px 5px, 5px 5px, 2.5em 2.5em; background-repeat: no-repeat; }
<select class="classic"> <option>Option</option> <option>Option</option> <option>Option</option> </select>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.