jquery - 更改单选按钮样式的问题

Question

我在应用程序中使用单选按钮和复选框我需要更改类似于下图的单选按钮的默认样式，

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>

从上面的代码我得到这样的，

但我不需要按钮背景。我需要类似于以下内容，

以同样的方式，我也需要为复选框提供相同的输出，

  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>

我也不需要复选框的背景，

Answer 1

表单元素样式很难改变。通常当你看到的不是“默认”元素时，它是附近某处带有隐藏输入的图像，它的值由 jquery/js 动态更改

复选框/单选框:

<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'))
});

下拉列表:

<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]