HTML/CSS: Yakınlaştırırken onay kutularının büyümesini nasıl sağlayabilirim?

Ben test için bu basit kodu var: Ben uzaklaştırmak metin küçülüyor ama ama eğer onay kutularını aynıHTML/CSS: Yakınlaştırırken onay kutularının büyümesini nasıl sağlayabilirim?

kalır

enter image description here

: Burada

<html> 
<head> 
<style type="text/css"> 
    ul{ 
     float:left; 
     margin:0; 
     list-style:none; 
     padding:0; 
     } 
</style> 
    </head> 
<body> 
    <ul> 
     <li><input type="checkbox" id="c1" class="checkBox">a</li> 
     <li><input type="checkbox" id="c2" class="checkBox"/>b</li> 
     <li><input type="checkbox" id="c3" class="checkBox"/>c</li> 
    </ul> 
    <ul> 
     <li><input type="checkbox" id="c4" class="checkBox"/>d</li> 
     <li><input type="checkbox" id="c5" class="checkBox"/>e</li> 
      <li><input type="checkbox" id="c6" class="checkBox" />f</li> 
    </ul> 
    <ul> 
     <li><input type="checkbox" id="c7" class="checkBox"/>g</li> 
     <li><input type="checkbox" id="c8" class="checkBox"/>h</li> 
     <li><input type="checkbox" id="c9" class="checkBox"/>i</li> 
    </ul> 
</body> 
</html>

sonucudur enter image description here

ve yakınlaştırdığımda metnin büyüğü daha büyük olur, ancak onay kutuları kalır Aynı

enter image description here

buna onay kutularını yanı boyutlarını değiştirecek şekilde yapmak mümkündür? örneğin kendi etiketlerinin boyutuyla orantılı mı? şimdiden teşekkürler

kaynak

2012-12-08 ksm001

onlar sormak istediğim bir soru için kullanılan etiketleriydi, Sen bunu yapamazsın söyliyim tamamen yanlış Farkettiğin için –

sayesinde sorunuzu etiketlediğinizi (jQuery gibi) kütüphaneler için mevcut eklentileri bol vardır ama sonunda hiç yapmadı. – ksm001

Evet, onay kutularını yeniden boyutlandıramazsınız. Onay kutularını stilleyemezsiniz. İşletim sistemi tarafından oluşturulur. Tek bir çözüm biliyorum - onay kutularını gizlemek için JS kullanın, ardından yeni bir html öğesi (span, div) oluşturun ve davranışı simüle edin. Ardından bu yeni öğeyi Medya Sorguları ile stilleyebilirsiniz. – marinbgd

jsFiddle DEMO

Kullanım CSS3 listesinin yanı sıra tarayıcı render onay kutularını yakınlaştırmak için!

.extraLarge ul { 
    -moz-transform: scale(1.50); 
    -webkit-transform: scale(1.50); 
    -o-transform: scale(1.50); 
    transform: scale(1.50); 
    padding: 10px; 
}

kaynak

2013-01-11 02:59:32 arttronics

Bunun mümkün olduğunu bile bilmiyordum. İyi şeyler :) – Tx3

Kesinlikle tek başına bu konuşma OP tarafından açıklanan sorunu çözmez: tarayıcı yakınlaştırmayı değiştirdiğinizde, onay kutuları varsayılan yakınlaştırma dışında çok küçük veya çok büyük olacaktır. –

CSS3 a ile aşağıdakileri kullanarak yapabilirsiniz: kontrol seçicisi. Bu, arka plan görüntüsüyle stillenmiş bir giriş kullanır. Böylece, yakınlaştırdığınızda/uzaklaştırdığınızda, metinle birlikte yeniden boyutlandırılır. Ne yazık ki, IE9 ve altında çalışmıyor.

CSS:

.theCheckbox input { 
    display: none; 
} 

.theCheckbox span { 
    width: 20px; 
    height: 20px; 
    display: block; 
    background: url("link_to_image"); 
} 

.theCheckbox input:checked + span { 
    background: url("link_to_checked_image"); 
}

HTML:

<label for="test">Label for checkbox</label> 
<label class="theCheckbox"> 
    <input type="checkbox" name="test"/> 
    <span></span> 
</label>

kaynak

2013-01-11 02:12:28 DaKoder

[** jsFiddle DEMO **] (http://jsfiddle.net/uFu2y/) – arttronics

** + 1 ** Harika cevap! – arttronics

Firefox bu özelliği bulunmuyor Chrome aksine bir "salt metin" yakınlaştırma özelliği vardır.

onay işaretini kaldırmak ve yakınlaştırma düzeyini Reset, Firefox'ta şeyi zoom yapmak. Chrome tarayıcı için

enter image description here

, bu özelliğe sahip Yakınlaştırma eklentileri içine bakmak.

kaynak

2013-01-11 05:29:38 arttronics

Yerel OS uygulamasına güvenmemeniz için kendi onay kutusu denetiminizi oluşturabilirsiniz. Ortak html öğelerini kullanarak oluşturduğunuzda, tarayıcı yakınlaştırma düzgün çalışacaktır.

kaynak

2013-01-11 20:35:17 Tx3

HTML/CSS: Yakınlaştırırken onay kutularının büyümesini nasıl sağlayabilirim?

cevap

İlgili konular