CSS3 미화 라디오 버튼 라디오 예제에 대한 자세한 설명

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

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

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

3. 전환 효과를 지원하려면

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

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

+는 의사- CSS2 클래스의 의미는 다음과 같습니다. div+p는 모든

요소 바로 뒤에 있는 요소를 선택합니다.

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

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

위 내용은 CSS3 미화 라디오 버튼 라디오 예제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!