CSS中的下拉背景

Question

我想更改下拉菜单的下拉部分，与选项部分的背景颜色相同。

添加了摘录。

.selectdropdown{
 background: none repeat scroll 0 0 lightgreen;
    border: 1px solid rgba(0, 0, 0, 0.17);
    border-radius: 2px;
    box-shadow: 0 -2px rgba(0, 0, 0, 0.03) inset;
    color: #000000;
    cursor: pointer;
    display: inline-block;
    font-size: 12px;
    font-weight: normal;
    height: 30px;
    line-height: 28px;
    padding: 0 10px;
    position: relative;
    vertical-align: middle;
    white-space: nowrap;
	}

<select class="selectdropdown" name="Status">	
<option value="Open">Open</option>
<option value="Close">Close</option>
<option value="Resolved">Resolved</option>
<option value="On Hold">On Hold</option>
</select>

Answer 1

我假设你只参考firefox因为chorme看起来没问题。我建议隐藏默认箭头并创建一个自定义箭头：

＆＃13;

＆＃13;

.selectdropdown {
  background: none repeat scroll 0 0 lightgreen;
  border: 1px solid rgba(0, 0, 0, 0.17);
  border-radius: 2px;
  box-shadow: 0 -2px rgba(0, 0, 0, 0.03) inset;
  color: #000000;
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  font-weight: normal;
  height: 30px;
  line-height: 28px;
  padding: 0 10px;
  position: relative;
  vertical-align: middle;
  white-space: nowrap;
  appearance: none;
  -moz-appearance: none;
  /* Firefox */
  -webkit-appearance: none;
  /* Safari and Chrome */
}
.styled-select:after {
  content: "";
  width: 0px;
  height: 0px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid rgb(0, 0, 0);
  position: absolute;
  left: 64px;
  top: 21px;
}

＆＃13;

<div class="styled-select">
  <select class="selectdropdown" name="Status">
    <option value="Open">Open</option>
    <option value="Close">Close</option>
    <option value="Resolved">Resolved</option>
    <option value="On Hold">On Hold</option>
  </select>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

简短的回答：不......

答案很长：取决于您使用的浏览器和操作系统。表单控件（复选框，选择等）可以部分样式化，在大多数情况下，胡萝卜之类的东西不能。它可能非常令人沮丧，但它就是它。

但是有一些解决方法。首先，您可以使用bootstrap。他们在样式控件方面做得非常出色，尽可能灵活，并且尽可能地跨浏览器。但是，它在不同的浏览器上甚至在不同的操作系统上看起来仍然有点不同。

如果这对您来说还不够，您可以使用一些javascript插件，它会产生（大多数情况下）<ul>或任何其他容器作为下拉列表。在示例引导程序has done it中，但您需要几行JS才能使其作为选择框工作。但我们的朋友google已经tons of alternatives了。