CSS aynı genişlikte metin hizalama ve seçim kutuları?

SORU

3 NİSAN 2012, Salı

CSS aynı genişlikte metin hizalama ve seçim kutuları?

Tamam bu imkansız gibi görünen sağ olsun. Bir metin kutusu ve bir seçim kutusu var. Onlar sol kenar satır yukarı ve sağ kenar boşluğu tam olarak aynı genişlikte olmasını istiyorum.

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            input, select {
                width: 200px;
            }
        </style>
    </head>
    <body>
        <input type="text" value="ABC"><br>
        <select>
            <option>123</option>
        </select>
    </body>
</html>

Bunu yapacağını düşünüyorsun, değil mi? Hayır. Seçin kutusunda 6px Firefox daha kısadır. Ekrana bakın. screenshot in firefox

Tamam bu yüzden kodu girin ve iki stilleri yapmanıza olanak sağlar.

<style type="text/css">
    input {
        width: 200px;
    }
    select {
        width: 206px;
    }
</style>

Tamam bu işe yarar!

Fixed in Firefox

Oh bekleyin, Chrome daha iyi test...

chrome screenshot

FFFFFFFUUUUUUUUUUUU

Birileri bu tüm tarayıcılarda sıraya nasıl söyleyebilir? Neden sadece genişlik yapamaz: bütün, neden tüm tarayıcılar farklı görünmesi? 200px Bunu yaparken de neden metin kutusunu seçin ve kutuya farklı yüksekliklerde? Nasıl aynı boyda onları alacağız? Yüksekliği ve satır yüksekliğini hiç boşuna denedi.

Çözüm:

Tamam cevaplar aşağıda yardımıyla çözüm buldum. Anahtarı kullanmaktırbox-sizing: border-boxbunu genişliğini çok özellikiçerirkenarlık ve dolgu. excellent explanation here bkz. Sonra da tarayıcı bunu kapatamam.

Aşağıdaki kodu da aynı boyutta kutuları yüksekliği ayarlayın ve yukarı çizgiler yani kutunun içindeki metni girintili. Ayrıca Krom seçim kutusu için kullandığı hizalama atacak olan garip görünümlü bir sınır gibi bir sınır ayarlamak gerekiyor. Bu HTML5 siteler (örn: Internet Explorer 9, Firefox, Krom, Safari destekleyen, Opera vs.) için çalışacak.

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            input, select {
                width: 200px;
                border: 1px solid #000;
                padding: 0;
                margin: 0;
                height: 22px;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
            }
            input {
                text-indent: 4px;
            }
        </style>
    </head>
    <body>
        <input type="text" value="ABC"><br>
        <select>
            <option>123</option>
            <option>123456789 123123123123</option>
            <option>123456789 123123123123 134213721381212</option>
        </select>
    </body>
</html>

Sadece son bir uyarı istemeyebilirsin giriş düğmeleri, onay kutuları vb bulunması gereken bu stil çok kullan input:not([type='button']) için değil, uygulamak için belirli türleri veya kullanım input[type='text'], input[type='password'] belirtmek olanları yapmak istiyorum bunu uygulamak.

CEVAP

3 NİSAN 2012, Salı

Bu <input type="text" /> eleman kenarlık, dolgu ve marj değerleri farklı olabilir <select> öğe örneğin biraz daha farklı varsayılan bir tarzı vardır çünkü.

Firefox için Firebug veya yerleşik Chrome için böyle bir elemanı olarak bir Müfettiş ile bu varsayılan stilleri görebilirsiniz. Daha fazlası, bu varsayılan stil tarayıcıdan tarayıcıya farklılık gösterir.

İki seçeneğiniz var:

Açıkça sınır, doldurma ve kenar boşluğu değerlerini hem de elemanları için aynı olması için ayarlayın
CSS sıfırlama stil kendi CSS stil önce dahil edilecek

Seçenek 1 ile giderdim. seçenek 2 çünkü. bir sürü iş gerektirir ve gereksiz CSS ton ile bitireceğiz. Ama bazı web geliştiricileri sıfırdan başlamak ve tam kontrol sahibi olmasını tercih ederim.

Bunu Paylaş: