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/

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/