Question

最近，我一直在尝试使用css设置<select>和<option>的样式。但我无法添加过渡。需要一些想法如何设计它。在此先感谢...

这是我的HTML

<nav class="mobile">
    <span  class="logo"><h1><a href="#">Site Logo</a></h1></span>
    <select>
        <option>Menu</option>
        <option><a href="#">Home</a></option>
        <option><a href="#">Tutorials</a></option>
        <option><a href="#">Freebies</a></option>
        <option><a href="#">Contact</a></option>
        <option><a href="#">About Me</a></option>
    </select>
</nav>

Answer 1

请参阅此链接：http://tympanus.net/codrops/2012/11/29/simple-effects-for-drop-down-lists/

希望这个插件可以提供帮助

Answer 2

以下是如何向select标签添加样式，与转换有关，您在寻找什么类型的转换？

您可以执行select {}，nav > select {}，nav select {}，.mobile select {}或许多其他方式来定位它。

.mobile > select {
  width: 190px;
  height: 20px;
  box-shadow: 0 1px 2px #2b2b2b;
  background: #eee;
  color: #0c5b78;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 3px 0 0 3px;
  margin-bottom: 5px;
  margin-right: 10px;
  float: left;
}

关于删除select默认样式并使用它们的更好主意。

CSS-Tricks

Answer 3

使用jQuery设置样式<select>或<option>很简单，请看一下

selectBoxIt

如何设置选择及其选项元素的样式并添加转换？

3 个答案: