How to make radio button more visible?

[knowledgenotebook]

Hi,

In the following page, http://184.73.76.212/demo/demographicInfo.html with
the CSS file at http://184.73.76.212/demo/style2.css
works fine with a regular browser or let’s say, with a web browser of a laptop computer, however, with a smartphone, the radio button is hardly visible, how could we make the radio buttons more visible?

Also, the HTML5 tag such as input of type, number, does not seem to be very responsive with a smartphone tho it works, is it that smartphone browser hasn’t caught up yet or do we need to feed this baby differently?

Thanks.

[__]

More visible? Make them bigger. More accessible? That’s what <label>s are for.

Right now, you’re marking up your fields like this:

Click this radio button  <input type=radio>

You should be wrapping the button label in one of two ways:

<label for=radioButton>Click this radio button</label>
<input type=radio id=radioButton>

or

<label>
    Click this radio button 
    <input type=radio>
</label>

In all major browsers, this makes clicking on the label toggle the radio button.

Also, the HTML5 tag such as input of type, number, does not seem to be very responsive with a smartphone tho it works …

Different browsers have different implementations. HTML5 is new enough that things like this are unpredictable. If you want consistency, use javascript validation.

Remember that, no matter what you choose, it is only a user convenience, not “security.” Make sure you always validate user input on the server.

[Author]

Posts