Changing radio button size, hiding it inside a div

Question

My current code:

    <div class="answer_divs" id="a1" style="float:left;">
        <span class="answer_span">  
            <input name="q1" type="radio" value="q1a1" style="width:10px">
            "Hello World";
        </span>
    </div>
    <div class="answer_divs" id="a2" style="float:right;">
        <span class="answer_span">  
            echo "Hello World";
        </span> 
    </div>

    <div class="answer_divs" id="a3" style="clear:both; float:left; margin-top:4px;">
        <span class="answer_span">  
            Document.Write("Hello World");
        </span>
    </div>
    <div class="answer_divs" id="a4" style="float:right; margin-top:4px;">
        <span class="answer_span">  
            System.out.print("Hello World");
        </span>
    </div>

I styled these dives, they look like buttons. Now i want to hide a radio button inside each div, i want it to be like so - no mather where i click in side of a div, it would check the radio button. I dont want the radio button to be seen.

I tried changing the radio buttons size with some css, and then hiding it with javascript, but it didnt work. How do i change the size of the radio button? (For hide i use jQuery).

Answer 1

Instead of a DIV I'd recommend you style up a LABEL element to look like your button.

Then simply absolutely position the radio input off-screen and when the user clicks on the LABEL element use the LABEL's 'for' attribute to link it to the off-screen radio input via a unique ID.

This also has the advantage of meaning you're not relying on any javascript.

<input type="radio" value="myValue" id="myID" />

<label for="myID"></label>

Answer 2

You should put the radio button outside of the div, preferably after, and instead of a div use a label. You can then style your label just as you did the div.

<input id="q1" name="q1" type="radio" value="q1a1" style="width:10px">
<label for="q1" class="answer_divs" id="a1" style="float:left;">
    <span class="answer_span">  
        "Hello World";
    </span>
</label>

Then you can use CSS styles like this:

input:checked + label{
    //active CSS
}

Source(s)

MDN - <label>

Answer 3

I would try something as follows:

<div class="answer_divs" id="a1" style="float:left;"> 
    <span class="answer_span">  
            "Hello World";
        </span>
    <input name="q1" type="radio" value="q1a1" style="width:10px">
</div>

Take the radio button outside of your <span> and then style it as follows:

.answer_divs input {
    visibility: hidden;
}

Remember, this whole snippet (and other similar ones) will be wrapped in a <form> element so it does not matter how you style the radio buttons since you will be hiding them.

You need to create a jQuery action such that when you click on .answer_divs , it checks off the child input (radio) button.

You can also wrap the text in a <label> tag, such that when you click on the label, it checks the button. However, note that the cursor (blinking | in Firefox) will move towards the input field itself, which may give you a different user experience.

Fiddle: http://jsfiddle.net/audetwebdesign/AXF8p/