html - 更改 HTML 选择箭头背景颜色
问题描述
我有一个带有选项的选择菜单
在 Chrome/Edge 中,它没有
如何使 Firefox 的“展开菜单”按钮看起来像 Chrome/Edge?
<select>
<option>Example</option>
<option>Example</option>
<option>Example</option>
<option>Example</option>
</select>
解决方案
一些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>
推荐阅读
- c# - Razor Pages 3.1 配置注入类
- visual-studio-2019 - 关于 Vs2019 社区或专业或企业
- r - 如何更改 R 中箱线图的顺序?
- rust - 将字段内容从一个公共结构复制到另一个
- python - 从此输出中刮取值
- php - 同时多个php请求,第二个请求直到第一个完成才开始
- android - Gradle 同步失败 Android Studio
- java - Java中的.Net Guid.ToByteArray() 等价于什么
- javascript - 在向上/向下滚动时触发一次功能
- python - 如何使用 Python 将文本文件的当前行和上一行保存在变量中?