순수한 CSS3를 사용하여 라디오 버튼을 아름답게 만드는 방법 샘플 코드 공유

라디오 버튼 라디오를 아름답게 만드는 이 순수한 CSS3 방법은 다음 상황에 적합합니다.

1 IE9 이상과 호환됩니다. IE8과 호환되어야 하는 경우 제거하려면 IE 해킹을 작성해야 합니다.

2. 라디오 버튼 선택 스타일이 있는 원은 CSS로 만들 수 있기 때문에 라디오 버튼만 지원하지만 체크박스 체크박스의 선택 효과에는 이미지 또는 아이콘 글꼴 라이브러리가 필요합니다

3. 스위칭 효과를 지원하는 데 필요합니다

아래 그림은 최종 효과입니다. 그림:

HTML 코드:

<label for="man" class="radio">
    <span class="radio-bg"></span>
    <input type="radio" name="sex" id="man" value="男" checked="checked" /> 男
    <span class="radio-on"></span>
</label>
<label for="woman" class="radio">
    <span class="radio-bg"></span>
    <input type="radio" name="sex" id="woman" value="女" /> 女
    <span class="radio-on"></span>
</label>

CSS 코드:

.radio{
    display: inline-block;
    position: relative;
    line-height: 18px;
    margin-right: 10px;
    cursor: pointer;
}
.radio input{
    display: none;
}
.radio .radio-bg{
    display: inline-block;
    height: 18px;
    width: 18px;
    margin-right: 5px;
    padding: 0;
    background-color: #45bcb8;
    border-radius: 100%;
    vertical-align: top;
    box-shadow: 0 1px 15px rgba(0, 0, 0, 0.1) inset, 0 1px 4px rgba(0, 0, 0, 0.1) inset, 1px -1px 2px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.2s ease;
}
.radio .radio-on{
    display: none;
}
.radio input:checked + span.radio-on{
    width: 10px;
    height: 10px;
    position: absolute;
    border-radius: 100%;
    background: #FFFFFF;
    top: 4px;
    left: 4px;
    box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.3), 0 0 1px rgba(255, 255, 255, 0.4) inset;
    background-image: linear-gradient(#ffffff 0, #e7e7e7 100%);
    transform: scale(0, 0);
    transition: all 0.2s ease;
    transform: scale(1, 1);
    display: inline-block;
}

이에서 가장 중요한 것은 method는 선택한 효과의 클래스 이름입니다. .radio input:checked +span. radio-on

+는 CSS2의 의사 클래스이며, 그 의미는 다음과 같습니다. p+p는 요소.

즉, 선택된(:checked) 입력을 찾고 그 뒤에 클래스 이름이 radio-on인 범위 요소가 선택된 원 효과를 생성합니다.

인터넷에서 라벨을 원형으로 만들어서 라벨을 아름답게 하는 방법은 여러 가지가 있는데, 이 경우 라디오 선택 텍스트를 라벨 외부에 배치해야 하므로 라디오 선택 효과가 발생하지 않습니다. 텍스트를 클릭하면 전환됩니다.

그래서 클래스 이름이 radio-bg인 스팬을 라벨에 추가하여 뒤쪽에 큰 원을 구체적으로 만든 다음, 클래스 이름이 radio-on인 스팬을 사용하여 선택한 작은 원을 앞쪽에 만들었습니다.

이렇게 하면 클릭한 라벨의 텍스트가 유지되며 라디오 선택 효과도 전환할 수 있습니다.

위 내용은 순수한 CSS3를 사용하여 라디오 버튼을 아름답게 만드는 방법 샘플 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!