Define radio button size independently of screen resolution

Question

I am formatting html radio buttons. I want to get something more or less like this (please ignore small font size and aligment)

I did this by setting the width and height css properties of each individual button. Like for example here:

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

This works when I look at my Chrome window with 75% zoom -which is my default for this page- but when I look at 100% zoom the radio buttons go back to all being small, and of equal size. They also lose their cool shading - I guess it has to do with a poorer resolution. The radio button dimensions are still there: my elements take up more space. But the radio buttons don't scale accordingly. I don't quite get what's going on.

I tried defining the radio button size in terms of em, but it didn't help.

For example, defining the three different sizes as 1em, 1.5em and 3em resulted in this:

EDIT: jsfiddle, which has the same behaviour when changing the browser zoom

Oswin

can you put your code in jsfiddle.net – Demob

Just added a link to jsfiddle - code is ugly but right now it's not crucial.. – Oswin

Answer 1

You should just consider creating your own look/style for radio buttons. Something like this:

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>

Bier

Thanks! This helped by changing input[type=radio] to input[name=radioBig], input[name=radioSmall] and so on, in order to be able to control the button sizes independently. Now selecting each radio button is not exclusive, but for my case I don't care. – Oswin

This is a very clean radio button style. (Y) – Outlier

Answer 2

Try vertical-align: middle; it may help

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

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

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

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

    </label>
</div>

Standford

Thanks. that solved the alignment (looks great now) but the sizing problem is still there. Here's the new jsfiddle, including bth the vertical alignment and the suggestion by @Ash below, of setting the body's font size. – Oswin

@Oswin sorry i can't understand what you are trying to say – Standford

I just mean that adding vertical-align:middle helped to align the labels to the vertical midpoint of the radio buttons. But my original problem is still there: the desired radio button size is there with 75% or 90% zoom, but disappears with 100% zoom. – Oswin

Answer 3

I think the reason the em sizing doesn't work is because you havem't defined the base size for your text: the em size has nothing to define as'1' em.

adding

   body {
        font-size: 14px;
    }

should keep the sizes constant on zoom.

Hoeg