멋지게 보이는 CSS 토글

5020 단어 htmlwebdevcss
구현할 스위치 토글 디자인이 필요할 때 완벽한 CSS 토글을 찾는 데 항상 어려움이 있습니다. 작업할 수 있는 멋진 프레임워크를 많이 찾을 수 있지만 사용하기에는 크기가 무거울 뿐입니다.

다양하고 보기 좋은 토글이 있는 이 작은 순수 CSS 라이브러리MoreToggles.css를 찾았습니다.

래퍼 div에 새 ClassName을 추가하기만 하면 이 라이브러리가 자동으로 처리됩니다.

특징
  • 순수한 CSS
  • 8가지 스타일
  • 퍼펙트 스케일링
  • 더 많은 스타일이 곧 출시됩니다!!






    • 사용법을 살펴보겠습니다.

    스타일시트 가져오기

    <head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/JNKKKK/MoreToggles.css/output/moretoggles.min.css">
</head>


    <input> 및 <label> 주위에 추가 div를 감쌉니다. mt-* 클래스를 추가하십시오.

    <div class="mt-ios-red"> 
  <input id="2" type="checkbox" />
  <label for="2"></label>
</div>



    다양한 스타일



    래퍼 div에 font-size 속성style="font-size:10px;"을 할당하여 토글의 크기를 조정할 수 있습니다. 다른 숫자를 시도해 볼 수 있으며 토글이 부드럽게 확장됩니다.

    <div class="mt-ios" style="font-size:10px;">
  <input id="3" type="checkbox" />
  <label for="3"></label>
</div>



    비활성화 토글

    일반 체크박스와 마찬가지로 disabled 태그에 <input> 속성을 추가할 수 있습니다.

    <div class="mt-ios">
  <input id="4" type="checkbox" disabled/>
  <label for="4"></label>
</div>



    알아채다
    <input> 내부에 <label>를 중첩할 때 주의하십시오. 이는 유효한 HTML 구문이지만 지원되지 않습니다.

    하지마😠

    <div class="mt-ios"> 
  <label>
    <input type="checkbox" />
  </label>
</div>


    하세요😃

    <div class="mt-ios">
    <input id="1" type="checkbox" />
    <label for="1"></label> 
</div>



    Enkai Ji 덕분에 이 작은 순수 CSS 토글을 만들 수 있습니다. here에서 이 라이브러리를 다운로드할 수 있습니다.


    결론



    👏👏 여기까지 오면서 이 순수한 CSS 토글을 사용하여 멋진 토글 스위치의 스타일을 지정할 수 있기를 바랍니다. 따라서 프로젝트에서 시도해 보고 즐기시기 바랍니다.

    자유롭게 생각과 의견을 공유하고 문제나 질문이 있으면 의견을 남겨주세요.

    다음까지,
    계속 해킹하세요. 건배
    ThinkPHP3.2-CURD 작업
    yii2.0-rules 검증 규칙 응용 실례

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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