Как я могу контролировать высоту элемента Option в Webkit? - PullRequest
12 голосов
/ 20 января 2011

Это кажется действительно простым, но я даже не могу найти что-то, говорящее мне, что это невозможно , не говоря уже о том, как это сделать.

У меня есть страница, которая использует расширенный/ множественные select с, и я не могу контролировать высоту параметров.Они выглядят очень уютно.В Firefox значения CSS для option в height и line-height, похоже, дают желаемый эффект, как и padding, но не в Chrome 8 или Safari 5. Я что-то упустил?Вот пример моего кода.Я добавил все, что могло повлиять на опцию в случае, если я пропускаю какое-то переопределенное значение.

body, input, select, checkbox { 
  font-family:'Avenir Lt Std',AppleGothic,'century gothic',Verdana,sans-serif; 
  font-size: 15px; 
  font-weight:200; 
  line-height: 18px; 
}

input, select { 
  color:#4c2a18; 
  border: 1px solid #cfc8b4; 
  background-color:#ffffff; 
  -moz-border-radius: 0; 
  -webkit-border-radius: 0; 
  border-radius: 0;
  margin:0; 
}

option { 
  height: 35px; 
  padding:5px; 
  line-height: 35px; 
}
<select size="5">
  <option value="">This is option 1</option>
  <option value="">Option 2</option>
  <option value="">Just trying to show how the line height thing works.</option>
</select>

Вы можете просмотреть его в действии здесь .

1 Ответ

27 голосов
/ 20 января 2011

Это невозможно в Chrome, в соответствии с набором электрических инструментов :

Установка отступов для группы или опции не действует в Chrome Вы не можете контролировать количество отступов.Вы можете установить отступы для выделения в целом в Chrome (как вы можете с IE8), но это выглядит очень странно.В отличие от IE8 вы можете щелкнуть в любом месте в выделенной области, чтобы открыть его, даже если у него есть отступы.

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