css中怎样去除下拉列表的框

当我们在使用CSS来美化网页时，经常需要更改下拉列表的样式。下拉列表框这一默认样式，可能会显得不太美观。但是，当我们使用CSS来尝试更改其样式时，发现默认的下拉列表框边框并不是很容易去掉。这篇文章将向您介绍如何在CSS中去除下拉列表框的边框。

select {
	border: none; 
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	
	/* 不指定该样式会导致Chrome/Safari浏览器下拉按钮被挤压，所以需要增大button样式的宽度 */
	padding-right:20px;
	height: 30px;
} 

上面的CSS代码就是去除下拉列表框边框的最常用代码。我们首先定义了选择器为“select”，然后定义了CSS的“border: none;”属性，这将去除下拉列表的边框。接着，为了确保在Chrome和Safari浏览器中下拉列表按钮正常显示，我们使用了“-webkit-appearance:none;”和“appearance:none;” 属性。

除此之外，我们还需要增加“padding-right：20px”属性，以便扩大“button”样式的宽度。通过这样的设置，下拉按钮就不会被挤压，并且会正常显示。最后，您可以根据自己的需求自行调整“height”属性，调整下拉列表的高度。

总结：通过以上CSS代码，我们可以很容易地去除下拉列表的边框。希望这篇文章对您学习CSS起到了帮助作用。