CSS로 라디오 버튼 스타일을 사용자 정의하는 방법은 무엇입니까? (코드 구현)

이 글의 내용은 CSS를 사용하여 라디오 버튼 스타일을 사용자 정의하는 방법에 관한 것입니다. (코드 구현)에는 특정 참조 값이 있습니다. 도움이 필요한 친구가 참조할 수 있기를 바랍니다.

html 부분

<div>
    <label>
        <input>
        <span>
            <span>
                <span></span>
            </span>
        </span>
        <span>LOVE</span>
    </label>
    <label>
        <input>
        <span>
            <span>
                <span></span>
            </span>
        </span>
        <span>YOU ARE NICE</span>
    </label>
</div>

css 스타일 부분

            .radio {
                width: 260px;
                height: 26px;
                line-height: 26px;
                margin: 200px auto;
                background-color: #ddeef1;
                font-size: 16px;
                color: #495060;
                text-align: center;
            }        
            label:first-child {
                margin-right: 40px;
            }
            label input, .radio_on {
              display: none;
            }            
            .pos {
                display: inline;
                vertical-align: middle;
            }        
            .radio_bg {
              position: relative;
              display: inline-block;
              height: 14px;
              width: 14px;
              border: 1px solid #B3B4B8;
              border-radius: 50%;
            }        
            label:hover .radio_bg, label input:checked + span.pos span.radio_bg {
              border: 1px solid #27B28B;
            }        
            label input:checked + span.pos span.radio_bg .radio_on {
              display: inline-block;
              position: absolute;
              top: 2px;
              left: 2px;
              width: 10px;
              height: 10px;
              border-radius: 50%;
              background-color: #27B28B;
            }

#🎜🎜 #효과图

관련 추천:

HTML 체크박스와 라디오의 스타일을 아름답게 만드는 방법

CSS를 사용하여 라디오와 체크박스 스타일을 맞춤설정하는 자세한 예# 🎜🎜 #

위 내용은 CSS로 라디오 버튼 스타일을 사용자 정의하는 방법은 무엇입니까? (코드 구현)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!