Помещение CSS в ‹datalist›

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

см.: http://jsfiddle.net/ryax5L29/20/

<input list="ServiceCity">
<datalist id="ServiceCity" name="ServiceCity"class = "atl_services">
            <option value "" disabled selected>Select City/County</option>
            .......other values
        </datalist>

Это CSS, который я хочу использовать

input{
    padding: 7px;
    outline: none;
    max-width: 100%;
    margin-bottom: 5px;
    border-width: 1px;
    border-style: solid;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px
    width: 88.5%;
    border: 1px solid GREY;
    box-shadow: 0px 0px 3px GREY;
    }

У меня также есть CSS, имхо, будет проще всего встроить CSS, но если кто-то может помочь мне в этом, было бы здорово спасибо!


html css html-datalist
person zomdar    schedule 21.11.2014    source источник
comment
стиль списка данных зависит от браузера, для списка очень мало вариантов стиля. Вы можете использовать jquery на своем сайте? Я подозреваю, что причина отрицательного ответа заключается в том, что стилизация списка данных задавалась здесь миллион раз.   -  person Billy    schedule 21.11.2014
comment
ой, я думаю, я не могу просто встроить стиль списка данных?   -  person zomdar    schedule 21.11.2014
comment
вы можете только стилизовать поле ввода и несколько параметров для списка опций, цвета и т. д.   -  person Billy    schedule 21.11.2014
comment
Возможный дубликат Есть ли как применить стиль CSS к параметрам списка данных HTML5?   -  person Volker E.    schedule 27.09.2017

Ответы (2)


arrow_upward
12
arrow_downward

По MDN:

Некоторые элементы просто не могут быть оформлены с помощью CSS. К ним относятся все расширенные виджеты пользовательского интерфейса, такие как элементы управления диапазоном, цветом или датой, а также все раскрывающиеся виджеты, включая элементы <select>, <option>, <optgroup> и <datalist>. Также известно, что виджет выбора файлов вообще не имеет стиля. Новые элементы <progress> и <meter> также попадают в эту категорию.

person fontophilic    schedule 21.11.2014
comment
Это самый печальный ответ для дизайнеров. - person warfish; 06.03.2018
comment
Это должен быть правильный ответ на этот вопрос и все его дубликаты. - person Ludovit Mydla; 19.10.2020

arrow_upward
0
arrow_downward

Я дал атрибут имени для ввода списка, как показано ниже, а также добавил вход css с именем, которое отлично работает.

<input list="ServiceCity" name="service-city">
<datalist id="ServiceCity" name="ServiceCity"class = "atl_services">
            <option value "" disabled selected>Select City/County</option>
            .......other values
        </datalist>

Код CSS следующим образом:

input[name="service-city"] {
  border: 2px solid orange;
  border-radius: 10px 10px 10px 10px;
  font-size: 18px;
  padding: 5px;
  height: 35px;
  width: 350px;
}

Спасибо,

person Buggssoni    schedule 03.03.2021