заполнение не работает в Safari и IE в списке выбора - PullRequest
Новая
       1

заполнение не работает в Safari и IE в списке выбора

17 голосов
/ 03 июня 2010

Кто-нибудь знает, почему мой Safari не принимает заполнение в избранных списках? В ФФ работает нормально, подскажите пожалуйста что делать. есть ли проблема с doctype?

код: 

<select style="padding-left:15px">
<option>male></option>
<option>female></option>
</select>

Я использую следующий тип документа; 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Ответы [ 6 ]

19 голосов
/ 03 июня 2010

Несмотря на то, что спецификация W3 не запрещает заполнение в полях выбора, по любой причине браузеры webkit (Safari, Chrome) не поддерживают его. Вместо этого вы можете удалить padding-left и использовать вместо него text-indent, добавив ту же сумму в поле выбора width.

Из вашего примера в вашем комментарии: 

<select id="sexID" name="user[sex]" 
        style="border:1px solid #C1272D;
               width:258px; // 243 + 15px
               text-indent:15px;
               height:25px;
               color:#808080;">
11 голосов
/ 22 декабря 2010

Используйте сочетание отступа текста и высоты строки, чтобы создать иллюзию заполнения. Работает в Safari и должен работать в IE. 

<select style="text-indent:15px; line-height:28px;">
 <option>male</option>
 <option>female</option>
</select>
7 голосов
/ 25 августа 2015

Я знаю, что это старая проблема, но, возможно, более новое решение поможет людям, работающим над ней сейчас.

Я добавил -webkit-appearance: initial; в свой стиль с отступами, чтобы решить проблему.

-webkit-appearance: none; не помогло в моем случае, потому что вместо него в качестве текстового поля отображается select.

Проверено на ...

Safari v5.1.7 (7534.57.2) в Windows

Safari v8.0.6 (10600.6.3) на Mac

iPhone 6

2 голосов
/ 08 марта 2013

Я только что исследовал ту же проблему. Ответ, который я придумала, состоит в том, чтобы установить свойства границ, чтобы быть отступом, но прозрачным. Например

Оригинал: 

select.paddedBox {
    padding-left:15px;
}

становится: 

select.paddedBox {
    border-bottom:solid 0px transparent;
    border-left:solid 15px transparent;
    border-right:solid 0px transparent;
    border-top:solid 0px transparent;
}

Если вы все еще хотите использовать рамку, вы можете использовать свойство outline для ее установки

1 голос
/ 16 июля 2015

Для конкретного поля выбора примените CSS как "-webkit-Appearance: none;"

1 голос
/ 22 июня 2011

Попробуйте это, это работает для Firefox, то есть некоторые проблемы с отступами, но работают с фоновым изображением. Лучшие работы в Google Chrome и Firefox. Это не работает в опере вообще, но отступы работают. Поэтому мне все равно, что это не работает в опере или другом браузере, потому что я ненавижу их, и невозможно исправить все проблемы, чтобы они прекрасно работали во всех браузерах.

Просто выберите опцию 208 px для изображения и поместите его так. Он имеет некоторые элементы взлома для т.е.;) 

.sl{
background-color: Transparent;

border: 0;
background: #181818;
color: #cccccc;
outline: none;
padding: 15px;
padding-left: 5px; 
font-size: 8pt;
line-height: 10px;

width: 208px;
height: 29px;
-webkit-appearance: none;

}



<select style="background: url(select.gif) no-repeat 0 0;" name="some_countries" class="sl">
<option style="background: #000;"  value="">What you need ?</option>
<option style="background: #000;" value="">I think it's good</option>
<option style="background: #000;"  value="">what do you think ?</option>
<option style="background: #000;" value="">Do you think the same lime me ? :)</option>
<option style="background: #000;"  value="">So what are you wating ?</option>
<option style="background: #000;" value="">Grab it now and be happy ;)</option>
</select>

Посмотрите в действии, как это выглядит;)

Я надеюсь, что вы помогли;)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...