Как я могу контролировать высоту элемента Option в Webkit?

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

У меня есть страница, которая использует расширенные/множественные select s, и я не могу контролировать высоту параметров. Они выглядят очень уютно. В 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>

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

источник

2011-01-20 Ben Saufley

Я не уверен на 100%, но я думаю, что это вряд ли возможно в Chrome. Элемент 'select' (и, конечно, его элементы' '' 'дочерних элементов ') находится под управлением базовой ОС, а не браузера. То, что он вообще работает в других браузерах, меня удивляет. Вы можете использовать стилизованный и управляемый JavaScript 'ul' (или' ol') для создания стилизованного элемента select-type. –

Я могу создать элемент 'select' в Chrome и добавить' padding' и т. Д. –

Я всегда забываю, что 'Enter' отправляет комментарий. Во всяком случае, я рассматривал маршрут «ul», но это просто кажется ненужным, когда 'select' выполняет совершенно адекватную работу, за исключением того, что переполняет все вещи слишком близко друг к другу. Я пытаюсь понять, почему это не всегда выглядит переполненным - если есть что-то дальше по иерархии, которая вызывает это, или что. –

Это невозможно в Chrome, по the electric toolbox:

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

источник

2011-01-20 16:37:35 mVChr

+11

Отлично! Благодарю. Это глупо. –

@Ben Saufley, если вы хотите настроить элемент управления формы, вам нужно либо: 1. свернуть свой собственный, b. используйте предварительно построенный lib, iii. просто жить с дефолтом. – zzzzBov

@zzzzBov - Значит, я слышал. Хотя я могу сделать почти все, что мне нужно, без участия JS. Это была небольшая эстетическая проблема, которую я надеялся решить просто. –

Как я могу контролировать высоту элемента Option в Webkit?

ответ

Смежные вопросы