Question

我一直在尝试使用css为选择框设置外观以制作自定义表单。我已经能够成功地使用firefox，但chrome和safari有一些额外的部分，它不允许我这样做。

Answer 1

设置appearence: none，你几乎可以做任何事情：https://jsfiddle.net/CUA9p/1475/

body {
  background-color: #fef;
  margin: 2em;
}

select {
    -webkit-appearance: none;
       -moz-appearance: none;
    background-color: #103;
    background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.1) 0, rgba(255, 255, 255, 0.1) 10px, transparent 10px, transparent 20px);
    border: 1px solid white;
    border-radius: 2px;
    box-shadow: 0 0 0 2px #103, 0 3px 0 2px #649;
    color: white;
    font-family: sans-serif;
    font-style: italic;
    margin: 2px;
    outline: none;
    text-align: center;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
    text-transform: lowercase;
    width: 100px;
}

<select>
    <option>Hello</option>
    <option>World</option>
</select>

另请看一下：http://danielneumann.com/blog/how-to-style-dropdown-with-css-only/

Answer 2

这是一个很棒的网站，可以让您的所有表单元素保持一致。 http://formalize.me/

Answer 3

我不认为单独使用css是可能的..因为选择框是一个特定于浏览器的控件..你将不得不使用javascript或jquery。

http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/

CSS - 如何使用css为选择框设置外观

3 个答案: