기본 확인란 및 라디오 입력 스타일 지정(CSS만 해당)

따라서 JavaScript, 플러그인 또는 수십 개의 래퍼에 의존하지 않고 기본 라디오 및 확인란의 스타일을 지정하고 싶습니까? 글쎄요, 가능합니다 :)

그 모든 마법의 공급자는 appearance CSS 속성입니다. appearance는 시스템 네이티브 스타일을 웹 요소에 적용하거나 제거하는 데 사용됩니다.

다음은 자세히 알아볼 수 있는 링크입니다.
https://developer.mozilla.org/en-US/docs/Web/CSS/appearance .

그러나 'Can i use'를 살펴보면 이 속성은 값을 "none"으로 설정할 때만 잘 지원되며 이것이 바로 우리가 필요로 하는 것임을 알 수 있습니다. 이는 시스템 및 브라우저 엔진에 따라 다른 모양 값이 다른 결과를 표시할 수 있지만 모든 브라우저가 appearance:none를 매우 잘 지원하기 때문입니다. 비밀이 없고 요소 기본 스타일만 제거하기 때문입니다. 따라서 이를 위해 우리는 좋은 지원을 받고 있습니다.

https://caniuse.com/#search=appearance

말할 가치가 있는 또 다른 것: 모양은 요소 스타일에만 관심이 있습니다. 즉, appearance: none를 확인란으로 설정하면 요소는 여전히 확인란이지만 모양(시스템 스타일)이 없습니다. 반대의 경우도 유효합니다. 예를 들어 appearance: button 요소를 지정하면 버튼에서 해당 요소가 바뀌지 않고 요소는 버튼 모양만 갖게 됩니다.

이것이 우리가 이 속성을 사용해야 하는 방법입니다.

.element {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}

코딩

이제 코드를 작성합니다. 아이디어는 매우 간단하므로 확인란과 라디오 입력 기본 스타일을 제거하고 자체 스타일을 적용합니다. 브라우저가 appearance 선택기를 지원하지 않으면 아무런 해가 없으며 대신 기본 확인란과 라디오가 사용됩니다. 결과는 다음과 같습니다.



먼저 확인란과 라디오 모양을 제거합니다.

[type=radio],
[type=checkbox] {
   -webkit-appearance: none;
   -moz-appearance:    none;
   appearance:         none;
}

이제 우리는 우리의 모습을 적용할 것입니다. 위의 속성과 이 속성을 단일 선택기로 결합할 수 있지만 게시물을 위해 분할할 수 있습니다.

[type=radio],
[type=checkbox] {
  width: 20px;
  height: 20px;
  border: solid 1px #cccccc;
  margin-right: 8px;
  position: relative;
}

이제 요소가 검사될 때 원하는 방식을 말해 보겠습니다. 기억하십시오: 우리는 행동이 아니라 외모를 제거했습니다. 여기서 아이디어는 요소가 검사될 때 빈 공간을 채우기 위해::before(의사 요소)를 사용한다는 것입니다. 우리 요소가 position: relative 로 설정되는 이유는::before가 절대적으로 그 안에 배치되어 "확인된"모양을 제공하기 때문입니다.

[type=radio]:checked::before,
[type=checkbox]:checked::before {
  content: "";
  width: 14px;
  height: 14px;
  background-color: #ffa500;
  position: absolute;
  top: 2px;
  left: 2px;
}

마지막으로 라디오 모서리를 둥글게 처리하여 확인란과 구분할 수 있습니다.

[type=radio],
[type=radio]:checked::before{
  border-radius: 100%;
}

그게 다야. 이제 스타일이 지정된 확인란과 라디오 입력이 있습니다 🎉

Unsplash의 Nadine Shaabana 표지 이미지.