Question

我将select标签的颜色设置为红色，它的行为与我预期的一样正常，但是当选项标签的数量超过300时，颜色不起作用，它的行为与浏览器代理一样，有什么问题以及如何解决这个问题？

Answer 1

谷歌开发人员认为没有人会在选择下拉列表中放置超过300个项目，因此为了提高性能，如果超出它，他们会关闭CSS样式。经过多次骚动后，他们将在v45中删除该限制。 see this Link

Answer 2

此代码可能对您有所帮助。 demo

select{
  background:transparent;
   width: 170px;
   padding: 2px;
   font-family:Arial, Helvetica, sans-serif;
   font-size:11px;
   font-weight:600;
   color:#fff;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 22px;
  -webkit-appearance: none;
 
  }

.select-div{
	width: 170px;
	height: 22px;
	overflow: hidden;
	background: url(arrowhead.png) no-repeat right #363636;
	border-top:#575757 1px solid;
	-webkit-border-radius: 4px 4px 4px 4px;
	 -moz-border-radius: 4px 4px 4px 4px;
		  border-radius: 4px 4px 4px 4px;
	-webkit-box-shadow: inset 0 2px 4px rgba(107, 105, 105, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
	 -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
		  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
		  -moz-box-shadow:    0px 8px 3px -9px #000000;
		  -webkit-box-shadow: 0px 8px 3px -9px #000000;
		  box-shadow:         0px 8px 3px -9px #000000;
}

select > option {
  background: pink;
}

<div class="select-div">
        <select name="pagination">
          <option value="10" selected="selected">10</option>
          <option value="20">20</option>
          <option value="30">30</option>
          <option value="40">40</option>
          <option value="50">50</option>
        </select>
        </div>

chrome上<select>标记的行为

2 个答案: