Question

关于this question和this question，我的问题仍然没有解决。解决方案删除了所有内容，包括值，箭头和边框。

我的代码是这样的。

.form-control {
	display: block;
	width: 100%;
	height: 28px;
	padding: 6px 12px;
	font-size: 12px;
	line-height: 12;
	color: #666;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	margin-top:5px;
	-webkit-appearance:caret;
	}

<select class="form-control" value="number">
	<option>1</option>
	<option>2</option>
	<option>3</option>
	<option>4</option>
</select>

Answer 1

如果你打算重新设置选择输入的样式，你可以实现-webkit-appearance：none，并添加你自己的样式：

＆＃13;

.custom-select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  
  border: 2px solid #333;
  padding: 10px;
  min-width: 200px;
  border-radius: 0;
  
  /* Add your own arrow image and set it as a background image */
}

＆＃13;

<select class="custom-select" value="number">
	<option>1</option>
	<option>2</option>
	<option>3</option>
	<option>4</option>
</select>

＆＃13;

上述方法适用于基于-webkit的浏览器，如chrome，safari。但是在firefox中还有一个bug，它仍然显示出丑陋的箭头。

如何消除野生动物园的光泽效果

1 个答案: