Definieren Sie die Optionsfeldgröße unabhängig von der Bildschirmauflösung

Question

Ich formatiere HTML-Optionsfelder. Ich möchte etwas mehr oder weniger so erhalten (bitte ignorieren Sie kleine Schriftgröße und Ausrichtung)

Ich tat dies, indem Sie die Breite und Höhe css Eigenschaften jeder einzelnen Taste. Wie zum Beispiel hier:

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

Dies funktioniert, wenn ich an meinen Chrome-Fenstern mit 75% Zoom sehe -die mein Standard für diese seiten- ist, aber wenn ich bei 100% Zoom sehe die Radio-Buttons gehen Sie zurück zu allen Sein klein und von gleicher Größe. Sie verlieren auch ihre kühle Schattierung - ich denke, es hat mit einer schlechteren Auflösung zu tun. Die Radioknopfmaße sind noch da: Meine Elemente nehmen mehr Platz ein. Die Optionsfelder skalieren jedoch nicht entsprechend. Ich verstehe nicht ganz, was vor sich geht.

Ich habe versucht, die Radio Button-Größe in Bezug auf em zu definieren, aber es hat nicht geholfen.

Zum Beispiel definieren die drei verschiedenen Größen als 1em, 1.5em und 3em in dieser Folge:

EDIT: jsfiddle, die das gleiche Verhalten aufweist, wenn die Zoom-Browser zu ändern

Answer 1

Sie sollten nur in Betracht ziehen, Ihren eigenen Look/Stil für Optionsfelder zu erstellen. Etwas wie folgt aus:

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

Ich denke, der Grund, die em Dimensionierung nicht der Fall funktioniert, weil Sie die Basisgröße für Ihren Text definiert havem't: die em Größe hat nichts zu definieren '1' sie.

Zugabe

body { 
     font-size: 14px; 
    } 

die Größen konstant auf Zoom halten sollte.

Answer 3

Versuchen vertical-align: middle; es

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