: Bir girdide sözdizimi öğesi kullanmadan önce: [type = checkbox]?

Question

This StackOverflow answer gerektirmeden CSS3 kullanarak onay kutularını stilini nasıl açıklayan bir <label>:

input[type=checkbox]:before { 
    content:""; display:inline-block; width:12px; height:12px; background:red; 
} 

Fiddle

Bu Chrome 22'de çalışır ancak Firefox 15 veya IE 9.

destek eksikliği göz önüne alındığında değil İkinci iki tarayıcıda , Chrome'un CSS3 spesifikasyonuna göre geçerli davranışı nedir?

Answer 1

Bu, bilinmeyen arazi; özellikler, işleri açıklığa kavuşturmaz. CSS 2.1 spec says: “Not. Bu belirtim, aşağıdakilerin etkileşimini tam olarak tanımlamaz: önce ve sonra: değiştirilen öğelerle (HTML'de IMG gibi). Bu, gelecekteki bir şartnamede daha ayrıntılı olarak tanımlanacaktır. ”Ve, tartışmasız INPUT, bir replaced element in CSS 2.1 sense olarak görülebilir.

Bu sözde öğelerin, IMG veya INPUT gibi herhangi bir içeriğe sahip olmayan (yani, EMPTY tarafından bildirilen içeriğe sahip olmayan) öğeler için kullanılamayacağını düşünebiliriz. Bununla birlikte, ifadeler IMG'den ve Appendix D seçicinin br:before seçicisiyle bir kuralı vardır.

Ve CSS3 Seçiciler, öneri statüsüne erişmiş CSS3 birkaç parçalarından biri, değil net şeyler yapar. It says: “Sözcüğün öğelerinden önce ve :: sonra oluşturulan öğeler, bir öğenin içeriğinden önce veya sonra oluşturulmuş içeriği tanımlamak için kullanılabilir. Bunlar, CSS 2.1 [CSS21] 'de açıklanmıştır.

Answer 2

Chrome'un davranışının geçersiz olduğunu düşünüyorum. take a look here, ::before ve ::after sözde öğelerin, content hedef öğenin content önce veya sonra eklediğini söyler. Giriş elemanları content; Sadece bir value var. Örneğin, <input>Pasta</input> yapamazsınız.

Bunların tümü doğruysa, Chrome'un davranışının geçersiz olduğu, IE ve Firefox'un doğru olduğu görülecektir.