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 개의 원이 필요합니다. 이것은 CSS의 : after 요소와 : after 요소를 추가하여 얻을 수 있습니다. 여기

는 DEMO

CSS의 키가 전체 버튼 56px하게 수직 라인의 높이를 동일하게하여 텍스트를 중심입니다. 꺼져 있으면 라디오 이미지가 회색 경계선이있는 26x26입니다. on으로 설정하면 : 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; 
}