Pure CSS3가 라디오 버튼을 아름답게 다룹니다

작은 쓰레기 같은 놈들 · 게시됨 2019. 5. 16. 오전 11:10:41

이 순수 CSS3 라디오 버튼 미화 방법은 다음과 같은 상황에서 잘 작동합니다:

1. IE9 이상과 호환될 수 있고, IE8과 호환되어야 한다면 스타일을 제거하는 IE 해킹을 작성하세요

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

3. 전환 효과를 지원하기 위해 JS가 필요하지 않습니다

아래 이미지는 최종 렌더링입니다:

HTML 코드:

로그인이 보이네요.

CSS 코드:

로그인이 보이네요.

이 방법에서 가장 중요한 것은 이펙트의 클래스 이름을 선택하는 것입니다: .radio input:checked + span.radio-on

+는 CSS2의 의사클래스로, div+p가 <div> 바로 다음 요소 를 선택함을 의미합니다 <p> .

즉, 선택한 입력(:checked)을 찾고, radio-on이라는 스팬 요소를 사용해 선택한 원 효과를 만듭니다.

인터넷에는 라벨을 원형으로 만드는 미화 방법이 많지만, 이 경우 단일 선택 텍스트를 라벨 밖에 배치해야 하므로, 텍스트를 클릭할 때 단일 선택 효과를 전환할 수 없습니다.

그래서 라벨에 radio-bg라는 스팬을 추가해서 뒤쪽에 큰 원을 만들고, 라디오-온이라는 스팬으로 선택 카드 앞쪽의 작은 원을 만들었습니다.

이렇게 하면 라벨 내 텍스트가 유지되고, 단일 선택 효과도 토글할 수 있습니다.

첨부: jQuery는 선택한 라디오의 값 방식을 사용합니다

var val=$('input:radio[name="sex"]:checked').val();

세 가지 방법 모두 첨부하세요:

$('input:radio:checked').val();

$("input[type='radio']:checked").val();

$("input[name='rd']:checked").val();

[CSS/DIV] Pure CSS3가 라디오 버튼을 아름답게 다룹니다

관련 게시물

본 섹션