CODEWITHSUNDEEP
jqueryhtmlcssjquery-mobile
Vinod
Vinod

Reputation: 2311

Issue with changing radio button style

I am using radio button and check box in application I need to change the default style of radio button which is similar to following image,

Gender
<input type="radio" name="gender" id="gender_1" />
<label for="gender_1">Male</label>
<input type="radio" name="gender" id="gender_2" />
<label for="gender_2">Female</label>

From the above code I am getting like this,

enter image description here

But I don't need the button background. I need similar to the following,

enter image description here

In the same manner I need the same out put for check box also ,

  Account Status
<input type="radio" name="status" id="status_1" />
<label for="status_1">Non-Resident Indian (NRI)</label>
<input type="radio" name="status" id="status_2" />
<label for="status_2">Person of Indian Origin (PIO)</label>
<input type="radio" name="status" id="status_3" />
<label for="status_3">Oversean Citizen of Indian (OCI)</label>
<input type="radio" name="status" id="status_4" />
<label for="status_4">Foreign Tourist</label>

I don't need background for check box also,

enter image description here

Upvotes: 0

Views: 85

Answers (1)

Justinas
Justinas

Reputation: 43479

Form elements style is hard to change. Usually when you see not "default" element, it's images with hidden inputs somewhere near and it's values are changed dynamically by jquery/js

Checkbox/Radio:

<div class='fakeCheckbox'><input type='radio' style='display: none;'/></div> // image of radio button
$('.fakeCheckbox').click(function(){
    var input = $(this).find('input');
    input.attr('checked', !input.attr('checked'))
});

Dropdown:

<div class='fakeDrop'><span></span><select style='opacity: 0; position: absolute; left: 0; topL 0;'></div> // Only opacity, so you can click on it!
$('.fakeDrop > select').change(function(){
    $(this).parent().find('span').text($('option:selected', this).text());
});

JSFiddle [v2]

Upvotes: 1

Related Questions