CSS만 사용하여 버튼처럼 보이도록 라디오 버튼의 스타일을 지정하고 IE8 호환성을 유지하려면 어떻게 해야 합니까?

라디오 버튼 모양 사용자 정의: 버튼처럼 보이게 만들기

문제:

목표를 설정했습니다. 일반적인 원형 다이얼이 아닌 버튼과 유사한 기부 양식에 라디오 버튼을 만듭니다. 또한 이 기능은 IE8에서 원활하게 작동해야 합니다.

해결책:

CSS를 활용하면 외부 프레임워크나 중요한 HTML 수정에 의존하지 않고도 원하는 결과를 얻을 수 있습니다. .

HTML 구조:

라디오 버튼에 목록(ul)을 사용하여 HTML 구조는 크게 변경되지 않았습니다.

CSS 스타일:

• 불투명도: 0.01을 사용하여 기본 라디오 버튼을 숨깁니다.
• 입력 위치 지정 요소를 절대적으로 그 위에 있는 레이블과 정렬합니다.
• 레이블을 블록 요소로 설정하고 전체 버튼 영역을 덮도록 절대적으로 배치합니다. 커서 사용: 상호작용을 위한 포인터.
• 라디오 버튼이 선택되면 CSS를 사용하여 해당 라벨에 배경색을 적용하여 버튼 클릭 효과를 흉내냅니다.

샘플 코드:

.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 input[type="radio"] {
  opacity: 0.01;
  z-index: 100;
}

.donate-now input[type="radio"]:checked+label,
.Checked+label {
  background: yellow;
}

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

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

예 용도:

<ul class="donate-now">
  <li>
    <input type="radio">

이 접근 방식을 사용하면 라디오 버튼 모양을 효과적으로 사용자 정의하여 기능 저하 없이 버튼과 비슷하게 만들 수 있습니다.

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