Ekran çözünürlüğünden bağımsız olarak radyo düğmesi boyutunu tanımlayın

Question

html radyo düğmelerini biçimlendiriyorum. Bu gibi daha fazla veya daha az bir şey almak istiyorum (lütfen küçük yazı tipi boyutunu ve boyutunu göz ardı edin)

Bunu, her düğmenin genişlik ve yükseklik css özelliklerini ayarlayarak yaptım. Gibi burada örneğin:

#r_starkeAblehnung.css-checkbox, #r_starkeZustimmung.css-checkbox { 
border: 0px; 
height: 50px; 
width: 50px; 
} 

Bu sayfada kullanılan varsayılan olan -ki% 75 zoom ile benim Chrome penceresinin bakmak ama% 100 zoom baktığınızda radyo düğmeleri tüm varlık geri döndüğünüzde Bu işleri küçük ve eşit büyüklükte. Aynı zamanda serin gölgelemelerini de kaybediyorlar - sanırım daha kötü bir çözümle ilgili. Radyo düğmesi boyutları hala orada: Öğelerim daha fazla yer kaplıyor. Ancak radyo düğmeleri buna göre ölçeklendirilmez. Neler olup bittiğini anlamıyorum.

Radyo düğmesi boyutunu em açısından tanımlamayı denedim, ancak yardımcı olmadı. 1em, 1,5em ve 3em olarak üç farklı boyutta tanımlayan Örneğin

bu sonuçlandı:

DÜZENLEME: jsfiddle, tarayıcı zoom

Answer 1

değiştirirken aynı davranışa sahip Radyo düğmeleri için kendi görünümünüzü/stilinizi oluşturmayı düşünmelisiniz. Böyle bir şey:

input[type=radio] { 
 
    appearance: none; 
 
    -moz-appearance: none; 
 
    -webkit-appearance: none; 
 
    width: 20px; 
 
    height: 20px; 
 
    border-radius: 10px; 
 
    outline: none; 
 
    box-shadow: inset 0 0 0 2px #FFF; 
 
    border: 2px solid #CCC; 
 
} 
 
input[type=radio]:checked { 
 
    background-color: #CCC; 
 
}

<input type="radio" name="radio" id="radio1" /> 
 
<label for="radio1">Radio 1</label> 
 
<input type="radio" name="radio" id="radio2" /> 
 
<label for="radio2">Radio 2</label>

Answer 2

ben size metin için temel boyutunu tanımlanmış havem't çünkü em boyutlandırma çalışmıyor sebebi olduğunu düşünüyorum: em boyutu olarak tanımlamak ilgisi yok '1' em.

zoom üzerinde sabit boyutları tutmalı

body { 
     font-size: 14px; 
    } 

ekledi.

Answer 3

o yardımcı olabilir vertical-align: middle; deneyin

$("#questionAnswerRadio").css("display", "block");

#questionAnswerRadio { 
 
    vertical-align: middle; 
 
    padding: 0; 
 
    /*margin-bottom: 60px;*/ 
 
    text-align: center; 
 
    display: none; 
 
    margin: auto; 
 
} 
 
#r_neutral.css-checkbox { 
 
    border: 0px; 
 
    height: 1em; 
 
    width: 1em; 
 
    vertical-align: middle; 
 
    margin: 0; 
 
} 
 
#r_ablehnung.css-checkbox, #r_zustimmung.css-checkbox { 
 
    border: 0px; 
 
    height: 1.5em; 
 
    vertical-align: middle; 
 
    width: 1.5em; 
 
    margin: 0; 
 
} 
 
#r_starkeAblehnung.css-checkbox, #r_starkeZustimmung.css-checkbox { 
 
    border: 0px; 
 
    height: 3em; 
 
    vertical-align: middle; 
 
    width: 3em; 
 
    margin: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 
 
<div id="questionAnswerRadio"> 
 
    <label for="r_starkeAblehnung" class="css-label"> 
 
     <input type="radio" id="r_starkeAblehnung" value="StarkeAblehnung" name="radio" class="css-checkbox"> \t <span>Starke Ablehnung</span> 
 

 
    </label> 
 
    <label for="r_ablehnung" class="css-label"> 
 
     <input type="radio" id="r_ablehnung" value="Ablehnung" name="radio" class="css-checkbox"> \t <span>Ablehnung</span> 
 

 
    </label> 
 
    <label for="r_neutral" class="css-label"> 
 
     <input type="radio" id="r_neutral" value="Neutral" name="radio" class="css-checkbox"> \t <span>Neutral</span> 
 

 
    </label> 
 
    <label for="r_zustimmung" class="css-label"> 
 
     <input type="radio" id="r_zustimmung" value="Zustimmung" name="radio" class="css-checkbox"> \t <span>Zustimmung</span> 
 

 
    </label> 
 
    <label for="r_starkeZustimmung" class="css-label"> 
 
     <input type="radio" id="r_starkeZustimmung" value="StarkeZustimmung" name="radio" class="css-checkbox"> \t <span>Starke Zustimmung</span> 
 

 
    </label> 
 
</div>