Webkit'teki bir Seçenek öğesinin yüksekliğini nasıl kontrol edebilirim?

Bu gerçekten basit gibi görünüyor, ancak bana bunun nasıl yapılacağını belirtmek için mümkün olduğunu söyleyen bir şey bile bulamıyorum.Webkit'teki bir Seçenek öğesinin yüksekliğini nasıl kontrol edebilirim?

Genişletilmiş/çok sayıda select s kullanan bir sayfam var ve seçeneklerin yüksekliğini denetleyemiyorum. Gerçekten rahat görünüyorlar. Firefox'ta, option için height ve line-height'daki CSS değerlerinin her ikisi de padding'da olduğu gibi istenen etkiye sahip gibi görünüyor, ancak Chrome 8 veya Safari 5'te değil. Bir şey mi eksik? İşte benim kodumun bir örneği. Eksik olduğum bazı geçersiz değerlerin olması durumunda seçeneği etkileyebilecek herhangi bir şey koydum.

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>

Sen eylem here içinde görebilirsiniz.

kaynak

2011-01-20 Ben Saufley

% 100 emin değilim, ancak Chrome'da bunun imkansız olduğunu düşünüyorum. 'Select' öğesi (ve tabii ki, onun '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '] 'ın altında yatan işletim sisteminin kontrolü altındadır Diğer tarayıcılarda hiç işe yaramadığı beni şaşırtıyor. Tarzlı bir seçmeli öğe elde etmek için stillenmiş ve JavaScript kontrollü, 'ul' (veya' ol') kullanabilirsiniz. –

"select" öğesini Chrome'da stilleyebilirim ve "padding" i ve buna benzerleri ekleyebilirim. –

Her zaman 'Enter' yorumunu gönderdiğimi unutuyorum. Her neyse, 'ul' rotasını düşündüm, fakat 'select' 'çok iyi birbirine yakın olan her şeyi birbirine karıştırmak dışında mükemmel bir iş yaptığında gereksiz görünüyor. Neden her zaman tıkanmadığını anlamaya çalışıyorum - eğer buna neden olan hiyerarşiden daha uzak bir şey varsa, ya da. –

Bu the electric toolbox göre, Chrome'da mümkün değildir: Bir OPTGROUP üzerine

Ayar dolgu veya seçenek böylece girinti miktarını kontrol edemez Chrome hiçbir etkisi yoktur. Chrome'da bir bütün olarak dolgu maddesini (IE8 ile yapabileceğiniz olarak) ayarlayabilirsiniz, ancak gerçekten garip görünüyor. IE8'in aksine, 'u seçerek herhangi bir yere tıklayıp, eğer varsa, 'u açın.

kaynak

2011-01-20 16:37:35 mVChr

+11

Harika! Teşekkürler. Bu aptalca. –

@Ben Saufley, özelleştirilmiş bir form kontrolü istiyorsanız, şunlardan birini yapmanız gerekir: 1. kendi rulonuzu, b. önceden oluşturulmuş bir kütüphane kullanmak, iii. sadece varsayılan ile yaşamak. – zzzzBov

@zzzzBov - Ben de duydum. Gerçi JS'yi içermem gerekecek herşeyi yapabilirim. Bu, basitçe çözmeyi umduğum küçük bir estetik problemdi. –

Webkit'teki bir Seçenek öğesinin yüksekliğini nasıl kontrol edebilirim?

cevap

İlgili konular