Выберите элемент CSS-класс для соответствия Класс элемента ввода

Question

Я нашел приятный стиль для своих элементов ввода, но теперь я хочу создать стиль, который будет выглядеть похожим (или дополняющим) для моих элементов выбора.

Я хотел бы, чтобы кто-то, знакомый с стилями CSS, дал мне стиль класса, который я могу использовать для своих элементов.

Вход элемент Класс:

input { 
    background: 12px 11px no-repeat, -moz-linear-gradient(top, #f7f7f8 0%, #ffffff 100%); 
    background: 12px 11px no-repeat, -webkit-linear-gradient(top, #f7f7f8 0%, #ffffff 100%); 
    background: 12px 11px no-repeat, -o-linear-gradient(top, #f7f7f8 0%, #ffffff 100%); 
    background: 12px 11px no-repeat, -ms-linear-gradient(top, #f7f7f8 0%, #ffffff 100%); 
    margin: 5px 10px 5px 10px; 
    background: 12px 11px no-repeat, linear-gradient(to bottom, #f7f7f8 0%, #ffffff 100%); 
    border-radius: 3px; 
    border: none; 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.05) inset; 
    -webkit-transition: all 0.2s linear; 
    -moz-transition: all 0.2s linear; 
    -ms-transition: all 0.2s linear; 
    -o-transition: all 0.2s linear; 
    transition: all 0.2s linear; 
    font-family: "Helvetica Neue", sans-serif; 
    font-size: 13px; 
    color: #222222; 
    position: relative; 
    height: 36px; 
    width: 300px; 
    padding-left: 10px; 
} 
input::-webkit-input-placeholder { 
    color: #999999; 
} 
input:-moz-placeholder { 
    color: #999999; 
} 
input:focus { 
    box-shadow: 0 1px 0 #2392f3 inset, 0 -1px 0 #2392f3 inset, 1px 0 0 #2392f3 inset,  -1px 0 0 #2392f3 inset, 0 0 4px rgba(35, 146, 243, 0.5); 
    outline: none; 
    background: 12px 11px no-repeat, #ffffff; 
} 

Answer 1

Если вы хотите, подобный стиль для ваших входов я бы предложил скопировать код и его применение для select элементов тоже. Конечно, вы можете изменить код, чтобы соответствовать вашим потребностям, Heres основной пример того, что вы могли бы сделать:

DEMO

Вы просто изменить:

input{} 

..разработать ..

select{} 

Который применяет CSS тоже все htmlselect элементы.

Стилизация select входы не всегда, как прямой Foward как укладка текста input, for examples I suggest you read through this post.

---

EDIT:

После выполнения некоторых исследований я обнаружил, что это почти невозможно стиль selectoptions потому что они отображаются операционной системой, а не браузером.

Это ближе всего я мог бы сделать select матч ваш input:

DEMO

Это использует jQuery что то, что я бы изначально предположить. Я также настоятельно рекомендую проверить некоторые плагины jQuery, которые могут обрабатывать стиль входов select.

Например, я нашел это:

http://gregfranko.com/jquery.selectBoxIt.js/#.UXpaF7XvuCk

, который выглядит, как он будет работать хорошо со стилем, который вы используете.