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

라디오 버튼을 버튼 유사 요소로 교체

라디오 버튼은 일반적으로 사용자 선택 양식에서 사용됩니다. 그러나 일반 버튼을 모방하도록 모양을 사용자 정의하면 사용자 인터페이스가 향상될 수 있습니다.

CSS를 사용하여 라디오 버튼 변환

이러한 변환은 CSS로만 수행할 수 있습니다. 외부 프레임워크가 필요합니다. 업데이트된 HTML 구조는 변경되지 않고 기능이 유지됩니다.

HTML 마크업

기부 양식의 HTML은 다음과 같이 동일하게 유지됩니다.

• 라디오 버튼 옵션 목록
  • 라디오 버튼과 라벨이 포함된 항목

  CSS 스타일링

  다음 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 label,
  .donate-now input {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  
  .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;
  }

  어떻게요? 작동합니다

  • 라디오 버튼과 라벨 요소를
  • 라디오 버튼의 불투명도가 0.01로 설정되어 시각적으로 숨겨집니다.
  • 라디오 버튼을 선택하면 연결된 라벨이 노란색 배경으로 강조 표시됩니다.
  • 라벨 호버 효과는 유지됩니다.

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