在jQuery mobile 1.4.0中更改单选按钮的样式

问题描述：

我在jQuery移动应用程序中有以下单选"按钮，我需要将其样式设置为图像波纹管中的单选"按钮.我已经尝试了以下CSS，但没有给我相同的结果，请帮助我..

I have the Following Radio buttons in my jQuery mobile app , I need to style them as the Radio button in the image bellow . I have tried the following css but it didn't give me the same result , Please Help me ..

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

这就是我得到的

答

要获得一个绿色的内部圆形并在其周围有透明的边框，此后确实需要2个圆形.这可以通过在CSS中添加:before元素和:after元素来实现.

To get a green inner circle with transparent around it and a border after that, you really need 2 circles. This could be achieved by adding a :before element as well as the :after element in CSS.

这是演示

Here is a DEMO

CSS通过使行高相同，使整个按钮高56像素，并使文本垂直居中.禁用时，无线电图像为26x26，带有灰色边框.启用时，:before css将添加一个新的带有边框的26x26空圆圈，而:after css将在中心创建一个较小的绿色圆圈.注意:您可能需要调整大小和边距，以获得所需的结果.

The CSS makes the whole button 56px tall and vertically centers the text by making the line-height the same. When off, the radio image is 26x26 with a gray border. When on, the :before css adds a new 26x26 empty circle with a border while the :after css creates a smaller green circle in the center. NOTE: you may need to tweak sizes and margins to get your desired results.

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

在jQuery mobile 1.4.0中更改单选按钮的样式

相关推荐