CSS만 사용하여 라디오 버튼을 버튼처럼 보이게 하려면 어떻게 해야 합니까?

라디오 버튼을 버튼처럼 보이게 만들기

기부 양식에 라디오 버튼을 포함하는 것이 일반적이지만 많은 사람들이 라디오 버튼 대신 버튼 같은 모양을 선호합니다. 전통적인 원형 다이얼. 이를 달성하기 위해 추가 HTML 또는 JavaScript 라이브러리 없이 CSS를 효과적으로 활용할 수 있습니다.

1단계: HTML 구조

문서의 원래 HTML 구조를 유지합니다. 라디오 버튼. 예:

2단계: CSS 스타일링

CSS를 사용하여 모양:

/* Reset styles */
.donate-now {
  list-style-type: none;
  margin: 25px 0 0 0;
  padding: 0;
}

.donate-now li {
  float: left;
  margin: 0 5px 0 0;
  width: 100px;
  height: 40px;
  position: relative;
}

.donate-now label,
.donate-now input {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Hide the radio button visually */
.donate-now input[type="radio"] {
  opacity: 0.01;
  z-index: 100;
}

/* Highlight the button when checked */
.donate-now input[type="radio"]:checked+label,
.Checked+label {
  background: yellow;
}

/* Visual button design */
.donate-now label {
  padding: 5px;
  border: 1px solid #CCC;
  cursor: pointer;
  z-index: 90;
}

.donate-now label:hover {
  background: #DDD;
}

설명:

• 스타일 재설정은 기본 브라우저 스타일을 제거합니다.
• 절대 위치 지정을 사용하여 요소 위치를 변경하면 라디오 버튼이 라벨.
• 라디오 버튼을 숨기면 시각적으로 보이지 않게 됩니다.
• 선택한 상태를 감지하면 관련 라벨의 배경색이 변경됩니다.
• 시각적 개선 패딩, 테두리, 호버 등 버튼 모양 제공 효과.

이러한 CSS 조정을 통해 라디오 버튼은 IE8과 같은 이전 브라우저와의 기능 및 호환성을 유지하면서 버튼과 같은 모양을 갖게 됩니다.

위 내용은 CSS만 사용하여 라디오 버튼을 버튼처럼 보이게 하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!