更改单选按钮样式的问题

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]