2016-10-01 3 views
5

는 CSS를 올바로 작동 및 라디오 버튼을 보여주는의 데스크톱 브라우저에서 cutom 라디오 버튼을사용자 정의 라디오 버튼을 볼 수 없습니다 내가 아래 사용하고

input[type=radio]{ 
    display:none; 
} 
.radio-options label::before { 
    content: "\2b24"; 
    color:#e2e2e2; 
    display: inline-block !important; 
    width: 17px; 
    height: 17px; 
    vertical-align:middle; 
    margin-right: 8px; 
    background-color: #fff; 
    border: 1px solid #e2e2e2; 
    border-radius: 8px; 
    font-size: 9px; 
    text-align: center; 
    text-shadow: 0px 0px 3px #fff; 
    font-family: monospace; 
    padding-top: 1.8px; 
    line-height: 10px; 
    cursor: pointer; 
} 

.radio-options label.active-radio::before { 
    content: "\2b24"; 
    color: #f9b410; 
    background-color: #fff; 
    font-size: 9px; 
    text-align: center; 
    text-shadow: 0px 0px 3px #fff; 
    font-family: monospace; 
    margin-left: 0px; 
    padding-top: 1.8px; 
    line-height: 10px; 
} 

<div class="radio-options"> 
     <div class="col-md-6 col-xs-6"> 
     <input id="some_thing" type="radio" > 
     <label ng-class="{'active-radio':true}">Something</label > 
     </div> 
</div> 

을 보여 언급 enter image description here

하지만 사파리 아이폰 OS의 아무것도 표시하지 않음 enter image description here

가능한 원인은 무엇입니까?

+0

야? 나는 지금 당장 같은 문제를 겪고 있으며 이유를 찾을 수 없다. 감사. – alanbartczak

+0

아니, 대신 스프라이트를 사용하고 활성 클래스가있는 배경 이미지를 사용하여 기능과 같은 라디오 버튼을 모방합니다 (상태를 설정하여 클래스를 설정하고 배경 이미지를 변경);) – icanbeacoder

+0

이것은 위치 지정 문제로 인한 것일 수 있습니다. 라벨에 상대적인 위치를 추가 한 다음 이전 유사 요소를 절대 위치에 배치하십시오. 그리고 활성 클래스가있을 때 디스플레이를 표시하는 것을 잊지 마십시오. –

답변

0

콘텐츠로 사용하는 유니 코드 기호 때문입니다. iOS에는 나타나지 않는 것 같습니다. 대신 "검은 색 원"으로 변경하면 효과가 있습니다. (그냥 크기를 보상하기 위해 글꼴 크기를 늘리십시오.) 당신이 당신의 문제에 대한 해결책을 찾았

Unicode Black Circle symbol

Similar issue

관련 문제