如何风格与只有CSS?

前端之家收集整理的这篇文章主要介绍了如何风格与只有CSS?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Possible Duplicate:
07000
07001

注意:此问题不是关于自定义下拉菜单。这只是关于样式的可能性< option>元素与CSS

如何为< select>样式< option>样式<元素与跨浏览器兼容性?我知道许多JavaScript的方式,自定义下拉菜单转换成< li>,我不是问。

<select class="select">
    <option selected>Select</option>
    <option>Blue</option>
    <option >Red</option>
    <option>Green</option>
    <option>Yellow</option>
    <option>Brown</option>
</select>

我问的是什么是可能的CSS只,与IE9,Firefox和Chrome的兼容性。

我想要这样或尽可能接近的样式。

我试过这里http://jsfiddle.net/jitendravyas/juwz3/3/,但Chrome不显示任何样式除了字体颜色,而Firefox显示一些。如何在Chrome中获取边框和填充工作?

解决方法

编辑2015年5月

免责声明:我已经从下面链接的答案取得了代码段:

重要更新!

除了WebKit,从Firefox 35,我们将能够使用appearance属性

Using -moz-appearance with the none value on a comboBox now remove the
dropdown button

所以现在为了隐藏默认样式,就像在select元素上添加以下规则一样简单:

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

对于IE 11支持,可以使用[:: – 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; }
<div>
  Select
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</div>

编辑

这里是你问一段时间以前的问题。
How to style a <select> dropdown with CSS only without JavaScript?正如它告诉那样,只有在Chrome和在某种程度上在Firefox中,你可以实现你想要的。否则,不幸的是,没有跨浏览器纯CSS解决方案样式选择。

原文链接:https://www.f2er.com/css/223625.html

猜你在找的CSS相关文章