source

CSS 확인란 입력 스타일

nicesource 2023. 9. 11. 21:53
반응형

CSS 확인란 입력 스타일

스타일에 상관없이input모든 입력 요소에 영향을 미칩니다.각 체크박스 요소에 클래스를 적용하지 않고 체크박스에만 적용하도록 스타일링을 지정할 수 있는 방법이 있습니까?

CSS 2를 사용하면 다음을 수행할 수 있습니다.

input[type='checkbox'] { ... }

이것은 지금쯤이면 꽤 광범위하게 지원될 것입니다.브라우저 지원 참조

레이블 없이 자체 솔루션을 만듭니다.

input[type=checkbox] {
         position: relative;
	       cursor: pointer;
    }
    input[type=checkbox]:before {
         content: "";
         display: block;
         position: absolute;
         width: 16px;
         height: 16px;
         top: 0;
         left: 0;
         border: 2px solid #555555;
         border-radius: 3px;
         background-color: white;
}
    input[type=checkbox]:checked:after {
         content: "";
         display: block;
         width: 5px;
         height: 10px;
         border: solid black;
         border-width: 0 2px 2px 0;
         -webkit-transform: rotate(45deg);
         -ms-transform: rotate(45deg);
         transform: rotate(45deg);
         position: absolute;
         top: 2px;
         left: 6px;
}
<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">

input[type=checkbox] {
         position: relative;
	       cursor: pointer;
    }
    input[type=checkbox]:before {
         content: "";
         display: block;
         position: absolute;
         width: 20px;
         height: 20px;
         top: 0;
         left: 0;
         background-color:#e9e9e9;
}
input[type=checkbox]:checked:before {
         content: "";
         display: block;
         position: absolute;
         width: 20px;
         height: 20px;
         top: 0;
         left: 0;
         background-color:#1E80EF;
}
    input[type=checkbox]:checked:after {
         content: "";
         display: block;
         width: 5px;
         height: 10px;
         border: solid white;
         border-width: 0 2px 2px 0;
         -webkit-transform: rotate(45deg);
         -ms-transform: rotate(45deg);
         transform: rotate(45deg);
         position: absolute;
         top: 2px;
         left: 6px;
}
<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">

라디오 버튼과 체크박스 스타일링을 위해 최근에 발견한 것.예전에는 jQuery 등을 사용해야 했습니다.하지만 이건 어리석게도 간단합니다.

input[type=radio] {
    padding-left:5px;
    padding-right:5px;
    border-radius:15px;

    -webkit-appearance:button;

    border: double 2px #00F;

    background-color:#0b0095;
    color:#FFF;
    white-space: nowrap;
    overflow:hidden;

    width:15px;
    height:15px;
}

input[type=radio]:checked {
    background-color:#000;
    border-left-color:#06F;
    border-right-color:#06F;
}

input[type=radio]:hover {
    box-shadow:0px 0px 10px #1300ff;
}

할 수 . 에 도 을 할 할 에 도 분명히 변경할 수 있습니다.input[type=radio]input[type=checkbox]고border-radius:15px;border-radius:4px;.

이것이 당신에게 어느 정도 유용하기를 바랍니다.

다음과 같은 클래스도 잘 작동합니다.

<style>
  form input .checkbox
  {
    /* your checkbox styling */
  }
</style>

<form>
  <input class="checkbox" type="checkbox" />
</form>

이 게시물에 기여해주신 모든 분들께 감사드립니다.제가 순수 CSS를 사용하여 달성할 수 있었던 것을 살펴보세요.

input[type=checkbox] {
  position: absolute;
  cursor: pointer;
  width: 0px;
  height: 0px;
}

input[type=checkbox]:checked:before {
      content: "";
  display: block;
  position: absolute;
  width: 34px;
  height: 34px;
  border: 4px solid #FFCB9A;
  border-radius: 20px;
  background-color: #445768;  
  transition: all 0.2s linear;
}


input[type=checkbox]:before {
  content: "";
  display: block;
  position: absolute;
  width: 34px;
  height: 34px;
  border: 4px solid #FFCB9A;
  border-radius: 3px;
  background-color: #445768;
}


input[type=checkbox]:after {
  content: "";
  display: block;
  width: 0px;
  height: 0px;
  border: solid #FFCB9A;
  border-width: 0 0px 0px 0;
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
  position: absolute;
  top: 0px;
  left: 50px;
  transition: all 0.2s linear;
}

input[type=checkbox]:checked:after {
  content: "";
  display: block;
  width: 12px;
  height: 21px;
  border: solid #FFCB9A;
  border-width: 0 5px 5px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 2px;
  left: 14px;
}
<input type="checkbox">

요약

따라서 다음은 h:0 & w:0을 추가하여 숨겨둔 실제 체크박스를 제어합니다.

input[type=checkbox] {...}

나머지는 가상 확인란을 제어합니다.

이를 통해 선택 시 가상 확인란의 배경이 제어됩니다.

input[type=checkbox]:checked:before {...}

선택을 취소하면 가상 확인란의 배경이 제어됩니다.

input[type=checkbox]:before {...}

선택을 취소하면 가상 확인란의 전경을 제어합니다.

input[type=checkbox]:after {...}

선택하면 가상 확인란의 전경이 제어됩니다.

input[type=checkbox]:checked:after {...}

도움이 된 만큼 도움이 되었으면 좋겠습니다 :)

다음을 수행하여 특정 속성에만 적용할 수 있습니다.

input[type="checkbox"] {...}

여기 설명이 있네요.

input[type="checkbox"] {
 /* your style */
}

그러나 이것은 IE7 이하 브라우저를 제외한 브라우저에만 적용되며 클래스를 사용해야 합니다.

Trident는 다음을 제공합니다.::-ms-check확인란 및 라디오 버튼 컨트롤에 대한 유사 메시지입니다.예를 들어,

<input type="checkbox">
<input type="radio">

::-ms-check {
    color: red;
    background: black;
    padding: 1em;
}

윈도우 8의 IE10에서는 다음과 같이 표시됩니다.

enter image description here

CSS가 체크박스 유형이나 다른 유형의 스타일을 수행할 수 있는 방법을 제공하지만, 이를 지원하지 않는 브라우저에는 문제가 있을 것입니다.

이 경우에는 체크박스에 클래스를 적용하는 방법밖에 없을 것 같습니다.

체크박스에 class="float"을 추가하기만 하면 됩니다.

그럼 당신의 css 코드에 그 스타일을 만들어 보세요.

당신이 할 수 있는 한 가지는 다음과 같습니다.

본론의

input[type="checkbox"] { /* css code here */ }

예를 들면

.checkbox{ /* css code here for ie */ }

그런 다음 IE 고유의 CSS를 사용합니다.

<!--[if lt IE 7]>
   <link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

IE에서 작동하려면 클래스를 추가해야 하며 IE를 지원하지 않는 다른 비 IE 브라우저에서는 작동하지 않습니다.하지만 그것은 css 코드로 당신의 웹사이트를 발전시키고 IE가 지원을 받을 때, 당신은 ie 특정 cs 코드와 또한 cs 클래스를 체크박스에서 제거할 수 있을 것입니다.

IE6가 속성 선택기를 이해하지 못하기 때문에 IE6에서만 볼 수 있는 스크립트(조건부 코멘트와 함께)와 딘 에드워즈의 jQuery 또는 IE7.js를 결합할 수 있습니다.

IE7(.js)은 Microsoft Internet Explorer(인터넷 익스플로러)가 표준 호환 브라우저처럼 동작하도록 하는 JavaScript 라이브러리입니다.많은 HTML 및 CSS 문제를 해결하고 IE5 및 IE6에서 투명 PNG가 올바르게 작동하도록 합니다.

클래스 또는 jQuery 또는 IE7.js를 사용하는 것의 선택은 여러분의 호불호와 여러분의 다른 요구에 달려 있습니다. (IE6에서 1비트 투명도로 떨어지는 완전한 투명도를 가진 PNG-8에 의존하지 않고 사이트 전체에 PNG-24 투명도 - Firewalls 및 pngnq 등에 의해서만 생성됨)

이 선택기를 사용하여 스타일을 확인란 입력에 적용할 수 있습니다.

input[type='checkbox']{}

그러나 안타깝게도 사용자 지정 스타일을 지원하지 않으므로 원래 입력을 포함하기 위해 "After"와 "Before"를 사용할 수 있습니다.참조: 데모

HTML

 <input
    type="checkbox"
    style="background-color: #d81b60; color: #fff"
    name="checkboxGreen"
  />

CSS

input[type='checkbox'] {
      position: relative;
      cursor: pointer;
      margin: 20px;
 }
 input[type='checkbox']:before {
      content: '';
      display: block;
      position: absolute;
      width: 20px;
      height: 20px;
      top: 50%;
      left: 50%;
      background-color: inherit;
      outline: 1px rgba(255, 255, 255, 0.2) solid;
      transform: translate(-50%, -50%);
 }
 input[type='checkbox']:checked:before {     
      content: '';
      display: block;
      position: absolute;
      width: 20px;
      height: 20px;
      top: 50%;
      left: 50%;
      background-color: inherit;
      outline: 1px rgba(255, 255, 255, 0.2) solid;
      transform: translate(-50%, -50%);
      box-shadow: 0px 0px 4px 1px #fff;
 }
 input[type='checkbox']:checked:after {
      content: '';
      display: block;
      width: 6px;
      height: 10px;
      border: solid;
      border-width: 0 2px 2px 0;
      border-color: inherit;
      position: absolute;
      top: 35%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(45deg);
 }

결과:

enter image description here

언급URL : https://stackoverflow.com/questions/1120879/css-checkbox-input-styling

반응형

'source' 카테고리의 다른 글

WooCommerce에서 맞춤 주문 상태로 Pay Now URL을 얻는 방법은?  (0) 2023.09.11
별도의 스레드 풀에서 실행되는 스프링 부트 액추에이터  (0) 2023.09.11
하나의 mysql 데이터베이스에서 다른 mysql 데이터베이스로 테이블을 복사하는 방법  (0) 2023.09.11
Uncatched TypeError: o.widget이 mouse.min.js Wordpress에서 함수가 아닙니다.  (0) 2023.09.11
Android에서 의도란?  (0) 2023.09.11

'source'의 다른글

  • 현재글CSS 확인란 입력 스타일

관련글

댓글

티스토리툴바