Добавить градиент, чтобы выбрать поле с CSS3 в Chrome?

Question

Я пытаюсь сделать градиентный фон на некоторых элементах формы. Хотя он отлично работает для текста и текстовых областей, то же самое, похоже, не работает для выбора в Chrome / Safari (хотя он работает на FF3). Есть ли способ сделать это?

Код CSS:

        .prettyform input, .prettyform textarea, .prettyform select {
            padding: 9px;
            border: 1px solid #E2E3E5;
            outline: 0;
            width: 400px;
            box-shadow: rgba(0,0,0,0.1) 0px 0px 8px;
            -moz-box-shadow: rgba(0,0,0,0.1) 0px 0px 8px;
            -webkit-box-shadow: rgba(0,0,0,0.1) 0px 0px 8px;
            background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #E2E3E5), to(#FFFFFF));  
            background: -moz-linear-gradient(top, #FFFFFF, #E2E3E5 1px, #FFFFFF 25px);
        }

HTML-разметка:

    <form class='prettyform'>
        <p>
        <label>Text Input</label> <br>
        <input type='text' name='test1'>
        </p>
        <p>
        <label>Select Input</label> <br>
        <select name='test2'>
            <option value='1'>Option 1</option>
            <option value='2'>Option 2</option>
            <option value='3'>Option 3</option>
        </select>
    </form>

Live Demo

Еще одна вещь, которую я заметил, заключается в том, что, несмотря на то, что они оба настроены на ширину: 400 пикселей, выбор заметно короче в Chrome и Firefox. Почему это?

Answer 1

На самом деле, вы можете сделать это в Chrome с фоновыми изображениями, см. http://s3.amazonaws.com/37assets/svn/480-custom_forms.html для примера. Моя самая большая проблема на данный момент - это найти версию, которая также работает для Firefox, но если это не является обязательным требованием для вас, непременно проверьте этот сайт и используйте метод фонового изображения.

Answer 2

Я не совсем уверен, можете ли вы выбирать стили в любом браузере. Они всегда были болью для CSS.

В т. Е. Опции не расширяются до ширины текста, в Firefox они короче из-за выпадающего значка и т. Д. Использование css для них - просто боль Если у вас должен быть стилизованный блок выбора, вы можете посмотреть на пользовательский интерфейс jquery, так как я считаю, что у них есть некоторые стилизуемые блоки выбора

Answer 3

Для справки, приведенный выше ответ mcmwhfy не решает проблему с чистым CSS, но является единственным решением для SELECTs в Chrome.

Следующие элементы будут вводить стиль / textarea / select в каждом браузере, где это возможно,кроме SELECTs в Chrome.Но, к сожалению, изображения - единственный способ сделать это в Chrome прямо сейчас.

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f8ff', endColorstr='#ffffff',GradientType=0 ); /* IE8/9 */
background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #F4F8FF 100%); /* IE10+ */
background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(102,204,255,0.75), rgba(0,0,0,0));
background: -webkit-gradient(linear, left top, left 20, from(#FFFFFF), color-stop(4%, #f4f8ff), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #f4f8ff 1px, #FFFFFF 25px);

Answer 4

посмотрите мой пример и посмотрите, как вы можете установить градиентный фон для выбора на Chrome.

http://jsfiddle.net/thirtydot/DCjYA/361/