【问题标题】:Change HTML Select arrow background color更改 HTML 选择箭头背景颜色
【发布时间】:2021-07-31 09:59:56
【问题描述】:

我有一个带有选项的选择菜单

在 Firefox 中,它有一个“箭头按钮”

在 Chrome/Edge 中,它没有

如何让 Firefox 的“展开菜单”按钮看起来像 Chrome/Edge?

<select>
<option>Example</option>
<option>Example</option>
<option>Example</option>
<option>Example</option>
</select>

【问题讨论】:

标签: html css google-chrome firefox


【解决方案1】:

一些linear-gradientbackground-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>

【讨论】:

  • 酷!我只想保留箭头,但摆脱周围的按钮。颜色的额外 CSS 将被其他内容覆盖
  • @SteveAlereza 我已经更新了答案以减少不必要的 CSS。不过,定位需要一些填充。
猜你喜欢
  • 2014-10-13
  • 1970-01-01
  • 2017-11-06
  • 2018-03-04
  • 1970-01-01
  • 2015-11-14
  • 1970-01-01
  • 2012-10-01
  • 2021-01-01
相关资源
最近更新 更多