Текстовое заполнение в выбранных ячейках

Я только что столкнулся с неясной проблемой с блоками select, имеющими дополнительное пространство вокруг текста, которое не кажется частью модели окна. Вот две картины того, что я имею в виду:

Select Box Padding Test

Select Box Padding Test 2

Вот пример этого (на JSFiddle), или вы можете посмотреть источник в моем примере ниже:

select, input
{
	padding:0px;
	font-size:20px;
}
select.textIndent
{
	text-indent:-1.5px;
}
select.paddingOffset
{
	padding-left:2.5px;
}
input.paddingOffset
{
	padding-left:5px;
}
<h3>No Padding Test</h3>
<select>
	<option>Item 1</option>
	<option>Item 2</option>
	<option>Item 3</option>
</select><br />
<input type="text" value="Item 1" />
<h3>Negative Text Indent</h3>
<select class="textIndent">
	<option>Item 1</option>
	<option>Item 2</option>
	<option>Item 3</option>
</select><br />
<input type="text" value="Item 1" />
<h3>Padding Offset</h3>
<select class="paddingOffset">
	<option>Item 1</option>
	<option>Item 2</option>
	<option>Item 3</option>
</select><br />
<input class="paddingOffset" type="text" value="Item 1" />

Ответы

Ответ 1

К сожалению, этот лишний пробел добавлен движком рендеринга браузера. Выделение элементов формы несовместимо в браузерах, и в этом случае CSS не определяется.

Взгляните на эту статью из Mozilla, объяснив некоторые способы смягчения непоследовательности блока выбора, тогда вы можете прочитать в этой статье от Smashing Magazine о стилистических элементах формы (обязательно ознакомьтесь с комментариями и проблемами, которые у людей были с выборами).

Ответ 2

Отступ, который вы видите, исходит из конкретной таблицы стилей браузера. В chrome атрибут, который отвечает за стилирование этих выпадающих меню, - -webkit-appearance, в firefox это -moz-appearance

Вы можете стандартизировать внешний вид выбранных меню, выполнив следующие действия:

select {
    -webkit-appearance: none;
    -moz-appearance : none;
    border:1px solid #ccc;
    border-radius:3px;
    padding:5px 3px;
}

Примечание: это не приведет к хорошим результатам, только даст вам стандартное дополнение/интервал в вашем поле выбора. Чтобы добиться хороших, настраиваемых прямоугольников выбора, которые вы можете полностью контролировать отступом/размером и т.д., Есть множество обучающих программ. Вот один из найденных после быстрого поиска в Google:

http://www.htmllion.com/default-select-dropdown-style-just-css.html

Ответ 3

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

Ответ 4

Чтобы изменить окно выбора, вам нужно использовать jQuery (или javascript вообще).

В любом случае, вы можете решить проблему, используя этот "трюк":

http://jsfiddle.net/Clear/hwzd88o5/6/

Посмотрите:

select.textIndent
{
    height: 80px;
    line-height: 80px;
    width: 300px;
    padding-left: 50px !important;
}

;)

Ответ 5

Попробуйте это. Это сработало для меня.

 <div id="div">
       <select size=1>
          <option value="0">Option 1</option>
          <option value="1">Option 2</option>
       </select>
  </div>

CSS

 #div option {padding-left: 5px;}