옵션 카드에 초점을 맞추는 동시에 라디오 단추의 스타일을 변경합니다

17793 단어 CSSrabeetech

해결하고 싶은 과제

  • 폼을 만들 때 선택 단추를 사용하지만 기본 선택 단추에서 모양을 바꾸고 싶습니다
  • 물론 선택 상태와 미선택 상태에서 스타일을 바꾸고 싶어요.
  • 스타일을 바꾸려면tab로 초점을 맞추기

  • 포커스가 맞으면 스타일을 바꾸고 싶어요
  • 기본validation 메시지
    • 도 표시하기를 원합니다.

    실제 작동 보기(from Runstant)


    http://runstant.com/supermuscles/projects/81bc262e

    코드


    index.html
    index.html
      <body>
    <form id="form">
      <div class="box">
        <span class='title'>Radio</span>
        <label class='label'>
          <input type="radio" name="radio" value='type1' required/>
          <span class='radio unchecked'>☆</span>
          <span class='radio checked'>★</span>
          <span class='radio_text'>type1</span>
        </label>  
        <label class='label'>
          <input type="radio" name="radio" value='type2' required/>
          <span class='radio unchecked'>☆</span>
          <span class='radio checked'>★</span>
          <span class='radio_text'>type2</span>
        </label>
      </div>
      <div class="box">
        <span class='title'>Text</span>
        <input type="text" name="text" required/>
      </div>
      <button id='button'>submit</button>
      
    </form>
  </body>
    main.css
    main.css
      input[type=radio] {
    position: absolute;
    opacity: 0;
    appearance: none;
    z-index: -1;
    transform: scale(0.1);
  }
  
  input[type=radio]:checked {
    position: absolute;
    top: 0px;
    left: 0px;
    appearance: none;
  }
  
  input[type=radio]:focus ~.unchecked {
    display: inline-block;
    color: red;
  }
  input[type=radio]:focus ~.checked {
    display: none;
    color: red;
  }
  
  input[type=radio]:checked ~.unchecked {
    display: none;
    color: red;
  }
  
  input[type=radio]:checked ~.checked {
    display: inline-block;
    color: red;
  }
  
  input[type=radio]:invalid {
    appearance: auto;
  }
  
  .radio {
    margin-right: 8px;
  }
  
  .checked {
    display: none;
  }
  
  
  .box {
    display: flex;
    margin-bottom: 16px;
  }
  .label {
    display: flex;
    margin-right: 8px;
    cursor: pointer;
  }
  
  .title {
    margin-right: 16px;
    font-weight: bold
  }

    설명


    이번에 하고 싶은 일의 요점은 1이다.기본 무선 버튼을 취소합니다.체크 상태와 포커스 상태에서 스타일을 바꿉니다.기본 확인 정보는 세 가지로 표시됩니다.
    각자의 해결 방법은 다음과 같다.

    기본 무선 버튼 취소

  • 에 관해서는 처음display: none;에 사라졌지만 라디오 버튼에 Required가 있으면 기존의form에서 오류가 발생할 수 있습니다.
  • 존재 자체가 사라질 수 없는 것 같아서 opacity: 0; 외관상 사라졌다.
  • 이렇게 하면 방해가 되기 때문에 position: absolute;와z-index: -1;로 사용자 정의 무선 버튼과 위치를 숨긴다.
  • 게다가 방해하지 않기 위해transform: scale(0.1); 물리적으로 줄였어요(이 근처에 다른 방법이 있는 것 같아요).

    • check 상태와focus 상태에서 스타일 변경

  • 이것은 기본 CSS의 선택기:focus와 :checked가 분리되어 있는 매우 간단합니다.
  • check 상태에서는 .unchecked가 있는 탭이 숨겨지고 .checked가 있는 탭이 표시됩니다.
  • focus 상태에서 .unchecked가 있는 라벨의 색을 변경했습니다.

    • 기본 프롬프트가 표시됩니다.

  • opacity에서 표시가 취소된 상태에서는 확인 정보 자체도 투명해진다.
  • 발리에서 충돌할 때 꺼내고 싶어서 :invalid 선택자appearance: auto;를 설정했다.
  • 이렇게 해서 무선 단추를 다시 표시한다(외관상으로는 숨겨져 있지만 뒷면에 존재한다).

    • 총결산


    이번에는 맞춤형 버튼이 촌스러워요. 그런데 마테리아 icon을 사용하거나 그림을 사용하거나 더 진한 색깔 모양을 사용하면 괜찮아요.
    요즘 form 태그에 부딪히는 벽이 많아서 많이 찾아보고 많이 배웠어요.
    form 라벨을 잘 사용하면 자바스크립트를 사용하면 노력을 하지 않아도 됩니다. 무엇을 사용할 수 있는지 기억하고 적극적으로 사용하세요.
    그게 다야.
    JS의 for 주기
    기존 애플리케이션을 Docker와 Swarm으로 서버화하십시오.

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage