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

Ответ 1

Несмотря на то, что спецификация W3 не запрещает заполнение в блоках выбора, по какой-либо причине браузеры веб-браузера (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;">

Ответ 2

Используйте комбинацию text-indent и line-height для создания иллюзии заполнения. Работает в Safari и также работает в IE.

<select style="text-indent:15px; line-height:28px;">
 <option>male</option>
 <option>female</option>
</select>

Ответ 3

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

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

-webkit-appearance: none; не помог мне в этом случае, потому что он показывает вместо этого текстовое поле.

Протестировано...

Safari v5.1.7 (7534.57.2) на окнах

Safari v8.0.6 (10600.6.3) на Mac

iPhone 6

Ответ 4

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

Просто выберите опцию 208 пикселей и поставьте ее так. У него есть некоторые элементы взлома, т.е.;)

.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 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>

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

Надеюсь, вы кое-что помогли;)

Ответ 5

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

Оригинал:

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;
}

Если вы все еще хотите использовать границу, вы можете использовать свойство контура, чтобы установить его

Ответ 6

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