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

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/