更改jQuery手机1.4.0中的单选按钮风格

Question

我在我的jQuery手机应用程序中有以下单选按钮，我需要将它们设置为图像波纹管中的单选按钮。我曾尝试以下的CSS，但它并没有给我同样的结果，请大家帮我..

的Html

<div data-role="page"> 
<div data-role="header" data-theme="b" style="height:63px;"> 
</div> 
<div data-role="content"> 
    <form> 
    <fieldset> 
    <input type="radio" id="Male" value=" Male" name="radio-group-1" /> 
    <label for="Male" data-inline="true" style="background:transparent     !important;">Male </label> 

    <input type="radio" id="Female" value=" Female" name="radio-group-1" /> 
    <label for="Female" data-inline="true" style="background:transparent !important;" >Female </label> 
    </fieldset> 
    </form> 


</div> 
</div> 

CSS

input[type="radio"] { 
display: none; 
} 


.ui-btn.ui-radio-off:after, .ui-btn.ui-radio-on:after{ 
    width: 25px; 
    height: 25px; 
} 

.ui-btn.ui-radio-off:after, .ui-btn.ui-radio-on:after{ 
    margin-top: -18px; 
    margin-left: -38px; 
} 
.ui-btn.ui-radio-on:after{ 
    width: 55px; 
    height: 55px; 
    background: green !important; 
    background-size:100px 24px; 
} 

这是什么我得到

Answer 1

要得到一个绿色的内圈在它周围是透明的，然后是边框，你真的需要2个圆圈。这可以通过添加：before元素以及CSS中的after元素来实现。

这里是一个DEMO

的CSS使得整个按键56px高，通过使线高度相同的垂直居中文本。关闭时，收音机图像为26x26灰色边框。启用时，：css之前添加一个带有边框的新的26x26空圆，而：css在中心创建一个更小的绿色圆圈。注意：您可能需要调整大小和边距以获得您想要的结果。

input[type="radio"] { 
    display: none; 
} 
.ui-radio label { 
    height:56px; 
    line-height: 56px; 
    padding-left: 50px; 
} 
.ui-radio .ui-btn.ui-radio-off:after { 
    background-image: none; 
    width: 26px; 
    height: 26px; 
    border: 2px solid #6E7983; 
    margin-top: -13px; 
} 
.ui-radio .ui-btn.ui-radio-on:after { 
    background-color: #86D51C; 
    width: 14px; 
    height: 14px; 
    margin-top: -6px; 
    margin-left: 10px; 
    border: 0; 
} 
.ui-radio .ui-btn.ui-radio-on:before { 
    content:""; 
    position: absolute; 
    display: block; 
    border: 2px solid #6E7983; 
    border-radius: 50%; 
    background-color: transparent; 
    width: 26px; 
    height: 26px; 
    margin-top: 14px; 
    margin-left: -39px; 
}