Zdefiniuj rozmiar przycisku radiowego niezależnie od rozdzielczości ekranu.

Question

Formatuję przyciski radiowe html. Chcę uzyskać coś mniej więcej takiego (zignoruj ​​mały rozmiar i stopień czcionki).

Zrobiłem to poprzez ustawienie właściwości css szerokości i wysokości każdego pojedynczego przycisku. Jak na przykład tutaj:

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

Działa to, kiedy patrzę na mojego okna Chrome z 75% zoom-co jest moją domyślną tej PAGE- ale kiedy patrzę na 100% zoom przyciski radiowe wrócić do bycia wszystko małe i takiej samej wielkości. Tracą też swoje fajne cieniowanie - myślę, że ma to związek z gorszą rozdzielczością. Wymiary przycisków radiowych są nadal dostępne: moje elementy zajmują więcej miejsca. Ale przyciski opcji nie są odpowiednio skalowane. Nie rozumiem, co się dzieje.

Próbowałem zdefiniować rozmiar przycisku radiowego pod względem em, ale to nie pomogło.

Na przykład zdefiniowanie trzech różnych rozmiarach, jak 1em 1.5em i 3em spowodowało to:

EDIT: jsfiddle, który ma takie samo zachowanie przy zmianie powiększenia przeglądarki

Answer 1

Powinieneś po prostu rozważyć stworzenie własnego wyglądu/stylu dla przycisków radiowych. Coś takiego:

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

Myślę, że powodem, dla którego dobór em nie działa dlatego, że havem't zdefiniowany rozmiar bazowy dla tekstu: rozmiar em nie ma nic do zdefiniowania jako "1".

dodanie

body { 
     font-size: 14px; 
    } 

powinien zachować rozmiary stały na zoom.

Answer 3

Spróbuj vertical-align: middle; może pomóc

$("#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>