2

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

これは私が得るものです ここに画像の説明を入力

4

1 に答える 1

8

周囲が透明な緑色の内側の円とその後の境界線を取得するには、実際には 2 つの円が必要です。これは、CSS に :before 要素と :after 要素を追加することで実現できます。

ここにデモがあります

CSS は、ボタン全体の高さを 56px にし、行の高さを同じにすることでテキストを垂直方向に中央揃えにします。オフの場合、無線イメージは 26x26 で枠線が灰色になります。オンの場合、:before css は境界線のある新しい 26x26 の空の円を追加し、:after 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;
}
于 2014-01-15T15:06:12.087 に答える