怎样使用css样式,如何使用只使用CSS的<选项>样式？

子衿沉夜

重要的最新消息！除了WebKit，Firefox 35我们将能够使用appearance财产：使用-moz-appearance带着none值现在移除下拉按钮。因此，为了隐藏默认样式，只需在SELECT元素上添加以下规则即可：select {

   -webkit-appearance: none;

   -moz-appearance: none;

   appearance: none;}对于IE11支持，您可以使用[::-ms-expand][15].select::-ms-expand { /* for IE 11 */

    display: none;}旧答案不幸的是，使用纯CSS无法满足您的要求。然而，这里有一些类似的东西，您可以选择作为一个工作。检查下面的实时代码。div {   margin: 10px;  padding: 10px;   border: 2px solid purple;   width: 200px;  -webkit-border-radius: 5px;  -moz-border-radius: 5px;  border-radius: 5px;}div > ul { display: none; }div:hover > ul {display: block; background: #f9f9f9; border-top: 1px solid purple;}div:hover > ul > li { padding: 5px; border-bottom: 1px solid #4f4f4f;}div:hover > ul > li:hover { background: white;}div:hover > ul > li:hover > a { color: red; }

  Select 

•    
• Item 1   
• Item 2   
• Item 3 

这是你不久前提出的问题。如何在不使用JavaScript的情况下使用CSS来样式下拉列表？正如它告诉我们的那样，只有在Chrome中，在某种程度上在Firefox中，你才能实现你想要的。否则，不幸的是，没有跨浏览器纯CSS解决方案的样式选择。