CSS를 사용하여 확인란 크기를 변경할 수 있습니까?

458

브라우저에서 CSS 또는 HTML을 사용하여 확인란의 크기를 설정할 수 있습니까?

width및 size작업 IE6 +에서가 아니라 체크 박스 숙박 16 × 16 내가 작은 크기를 설정 한 경우에도 파이어 폭스와.

html css

— 격노
소스

3

크로스 브라우저를 사용하기가 어렵습니다. 로저 요한슨은 이것을 광범위하게 조사 했다.

— Cristian Libardo

모든 주석 읽기-CSS를 사용하지 않고도이를 수행 할 수있는 간단한 방법이 있습니다. <input type = "checkbox"name = "checkboxName"value = "on"style = "width : 110 %; height : 110 %">

— Williamz902

이 간단한

— 답변을

434

확장하기 때문에 약간 추악하지만 대부분의 최신 브라우저에서 작동합니다.

input[type=checkbox]
{
  /* Double-sized Checkboxes */
  -ms-transform: scale(2); /* IE */
  -moz-transform: scale(2); /* FF */
  -webkit-transform: scale(2); /* Safari and Chrome */
  -o-transform: scale(2); /* Opera */
  transform: scale(2);
  padding: 10px;
}

/* Might want to wrap a span around your checkbox text */
.checkboxtext
{
  /* Checkbox text */
  font-size: 110%;
  display: inline;
}

<input  type="checkbox" name="optiona" id="opta" checked />
<span class="checkboxtext">
  Option A
</span>
<input type="checkbox" name="optionb" id="optb" />
<span class="checkboxtext">
  Option B
</span>
<input type="checkbox" name="optionc" id="optc" />
<span class="checkboxtext">
  Option C
</span>

스 니펫 확장

— jdw
소스

3

이것은 답변으로 표시된 답변이 많은 경우에 해결책을 제공하지 않기 때문에 (xp에서 firefox에 대한 해결책이 없거나 전혀 크롬이 아닙니까?) 구식이며 링크와 많은 가치가없는 의견 만 포함하기 때문에 올바른 답변 인 것 같습니다.

— nurettin

4

이 답변에 대한 @jdw +1 및 심지어이 작업을 수행해야했으며 귀하의 답변이 도움이되었습니다. 그러나 어떻게 든 '크기 조정'확인란이 약간 왜곡되어 나타납니다. 이것이 FF 또는 내 OS (Ubuntu 12.04)와 관련이 있는지 모르겠습니다. 어쨌든 감사합니다 :)

— itsols

1

scale ()은 크롬, FF 및 IE에 대해 2 개의 매개 변수가 필요하다고 생각합니다. 따라서 모든 스케일을 scale (2,2)로 변경하면 모든 브라우저에서 작동합니다.

— Onur Topal

10

추가 transform: scale(2);모든 브라우저에 대한 더 많은 보장하기 위해,도

— 아드리아누 센드에게

8

스케일링은 대단해 보입니다. 스케일 2에서는 이미 개별 픽셀이 보입니다. 나는 아름다운 큰 CSS 체크 박스를 위해이 솔루션을 선택하지 않을 것입니다.

— basZero

369

모든 최신 브라우저를위한 작업 솔루션.

input[type=checkbox] {
    transform: scale(1.5);
}

<label><input type="checkbox"> Test</label>

스 니펫 확장

적합성:

IE : 10+
FF : 16+
크롬 : 36+
사파리 : 9+
오페라 : 23+
iOS Safari : 9.2 이상
Android 용 Chrome : 51 이상

외관:

Chrome 58 (2017 년 5 월), Windows 10

— 동료 낯선 사람
소스

이것은 8과 같은 오래된 브라우저에도 적용됩니까?

— Huangism

1

@Huangism 아니요, 위의 코드는 transform속성을 지원하지 않는 IE 8에서는 아무런 영향을 미치지 않습니다 . IE 9는 -ms-transform사용할 수있는 기능 을 지원 하지만 일부는 픽셀 화되어 있으므로 IE 9를 기본값으로 두는 것이 좋습니다.

— Simon East

확인란이 픽셀 화되어 스케일에 제한이 있기 때문에 위의 접근 방식은 나쁘지 않습니다.

— rishiAgar

9

macOS 10.13.3을 사용하여 Chrome 64에서 매우 픽셀 화됨 :( timo-ernst.net/misc/zeug/cb-pixel.jpg

— Timo

여전히 Chrome 76에서 픽셀 화되었습니다.

— Labrador

68

쉬운 해결책은 속성을 사용하는 것입니다 zoom.

input[type="checkbox"] {
    zoom: 1.5;
}

<input type="checkbox" />

스 니펫 확장

— 루이즈
소스

8

모든 브라우저에서 작동하는지 확실하지 않지만 스케일 변환 솔루션보다 화면에서 더 예쁘게 보입니다.

— Gwened

2

macOS 10.13.3을 사용하는 Chrome 64에서는 변형 + 배율을 사용하는 것보다 픽셀 화가 적습니다.

— Timo

Mozilla는 매우 권장하지 않습니다. developer.mozilla.org/en-US/docs/Web/CSS/zoom

— 무역 아이디어 필립

Firefox가 거의 그것을 지원하지 않는 유일한 브라우저 인 반면 Mozilla가 실망시키지 않는 것이

— 흥미 롭습니다

47

2020 버전 -의사 요소를 사용하면 크기는 글꼴 크기에 따라 다릅니다.

기본 확인란 / 라디오는 화면 외부에서 렌더링되지만 CSS는 기본 요소와 매우 유사한 가상 요소를 만듭니다. 흐림없이 모든 브라우저를 지원합니다. 크기는 글꼴 크기에 따라 다릅니다. 키보드 동작 (공간, 탭)도 지원됩니다.

https://jsfiddle.net/ohf7nmzy/2/

body{
	padding:0 20px;
}
.big{
	font-size: 50px;
}

/* CSS below will force radio/checkbox size be same as font size */
label{
	position: relative;
	line-height: 1.4;
}
/* radio */
input[type=radio]{
	width: 1em;
	font-size: inherit;
	margin: 0;
	transform: translateX(-9999px);
}
input[type=radio] + label:before{
	position: absolute;
	content: '';
	left: -1.3em;
	top: 0;
	width: 1em;
	height: 1em;
	margin: 0;
	border:none;
	border-radius: 50%;
	background-color: #bbbbbb;
}
input[type=radio] + label:after{
	position: absolute;
	content: '';
	left: -1.3em;
	top: 0;
	width: 1em;
	height: 1em;
	margin: 0;
	border: none;
	background-color: white;
	border-radius: 50%;
	transform: scale(0.8);
}
/*checked*/
input[type=radio]:checked + label:before{
	position:absolute;
	content:'';
	left: -1.3em;
	top: 0;
	width: 1em;
	height: 1em;
	margin: 0;
	border: none;
	background-color: #3b88fd;
}
input[type=radio]:checked + label:after{
	position: absolute;
	content: '';
	left: -1.3em;
	top: 0;
	width: 1em;
	height: 1em;
	margin: 0;
	border: none;
	background-color: white;
	border-radius: 50%;
	transform: scale(0.3);
}
/*focused*/
input[type=radio]:focus + label:before{
	border: 0.2em solid #8eb9fb;
	margin-top: -0.2em;
	margin-left: -0.2em;
	box-shadow: 0 0 0.3em #3b88fd;
}


/*checkbox/*/
input[type=checkbox]{
	width: 1em;
	font-size: inherit;
	margin: 0;
	transform: translateX(-9999px);
}
input[type=checkbox] + label:before{
	position: absolute;
	content: '';
	left: -1.3em;
	top: 0;
	width: 1em;
	height: 1em;
	margin: 0;
	border:none;
	border-radius: 10%;
	background-color: #bbbbbb;
}
input[type=checkbox] + label:after{
	position: absolute;
	content: '';
	left: -1.3em;
	top: 0;
	width: 1em;
	height: 1em;
	margin: 0;
	border: none;
	background-color: white;
	border-radius: 10%;
	transform: scale(0.8);
}
/*checked*/
input[type=checkbox]:checked + label:before{
	position:absolute;
	content:'';
	left: -1.3em;
	top: 0;
	width: 1em;
	height: 1em;
	margin: 0;
	border: none;
	background-color: #3b88fd;
}
input[type=checkbox]:checked + label:after{
	position: absolute;
	content: "\2713";
	left: -1.3em;
	top: 0;
	width: 1em;
	height: 1em;
	margin: 0;
	border: none;
	background-color: #3b88fd;
	border-radius: 10%;
	color: white;
	text-align: center;
	line-height: 1;
}
/*focused*/
input[type=checkbox]:focus + label:before{
	border: 0.1em solid #8eb9fb;
	margin-top: -0.1em;
	margin-left: -0.1em;
	box-shadow: 0 0 0.2em #3b88fd;
}

<input type="checkbox" name="checkbox_1" id="ee" checked /> 
<label for="ee">Checkbox small</label>

<br />

<input type="checkbox" name="checkbox_2" id="ff" /> 
<label for="ff">Checkbox small</label>

<hr />

<div class="big">
	<input type="checkbox" name="checkbox_3" id="gg" checked /> 
	<label for="gg">Checkbox big</label>

	<br />

	<input type="checkbox" name="checkbox_4" id="hh" /> 
	<label for="hh">Checkbox big</label>
</div>


<hr />


<input type="radio" name="radio_1" id="aa" value="1" checked /> 
<label for="aa">Radio small</label>

<br />

<input type="radio" name="radio_1" id="bb" value="2" /> 
<label for="bb">Radio small</label>

<hr />

<div class="big">
	<input type="radio" name="radio_2" id="cc" value="1" checked /> 
	<label for="cc">Radio big</label>

	<br />

	<input type="radio" name="radio_2" id="dd" value="2" /> 
	<label for="dd">Radio big</label>
</div>

스 니펫 확장

2017 년판 -줌 또는 스케일 사용

브라우저가 비표준 zoom기능을 지원하는 경우 (좋은 품질) 또는 표준 인 경우transform: scale (흐리게) 인 .

확장은 모든 브라우저에서 작동하지만 Firefox 및 Safari에서는 흐리게 표시됩니다 .

https://jsfiddle.net/ksvx2txb/11/

@supports (zoom:2) {
	input[type="radio"],  input[type=checkbox]{
	zoom: 2;
	}
}
@supports not (zoom:2) {
	input[type="radio"],  input[type=checkbox]{
		transform: scale(2);
		margin: 15px;
	}
}
label{
  /* fix vertical align issues */
	display: inline-block;
	vertical-align: top;
	margin-top: 10px;
}

<input type="radio" name="aa" value="1" id="aa" checked /> 
<label for="aa">Radio 1</label>
<br />
<input type="radio" name="aa" value="2" id="bb" /> 
<label for="bb">Radio 2</label>

<br /><br />

<input  type="checkbox" name="optiona" id="cc" checked /> 
<label for="cc">Checkbox 1</label>
<br />
<input  type="checkbox" name="optiona" id="dd" /> 
<label for="dd">Checkbox 1</label>

스 니펫 확장

— ViliusL
소스

FQ에서 줌이 잘 작동하는 것처럼 보입니다. 이전 버전의 Gecko를 조심할 것입니까?

— Neil Chowdhury

27

방금 이것으로 나왔습니다.

input[type="checkbox"] {display:none;}
input[type="checkbox"] + label:before {content:"☐";}
input:checked + label:before {content:"☑";}
label:hover {color:blue;}

<input id="check" type="checkbox" /><label for="check">Checkbox</label>

스 니펫 확장

물론, 이것 덕분에 content 필요에 다른 글꼴을 원하거나 사용하면 이미지를 사용할 수 있습니다 ...

여기서 주요 관심사는 다음과 같습니다.

확인란 크기는 텍스트 크기에 비례하여 유지됩니다
체크 박스의 화면비, 색상, 크기를 제어 할 수 있습니다
추가 HTML이 필요하지 않습니다!
CSS는 3 줄만 필요합니다. 마지막 줄은 아이디어를 제공하는 것입니다.

편집 : 주석에서 지적했듯이 키 탐색으로 확인란에 액세스 할 수 없습니다. tabindex=0초점을 맞추기 위해 레이블의 속성으로 추가해야합니다 .

— 샤 쿠스
소스

2

불행히도 display:none입력을 설정 하면 tab키로 선택 되지 않으므로 이것이 좋은 생각이라고 생각하지 않습니다.

— Harfangk

2

좋은 말입니다. 이 문제를 해결하기 위해 입력에 tabindex = 0을 추가 할 수 있습니다.

— Sharcoux

26

미리보기 :
http://jsfiddle.net/h4qka9td/

*,*:after,*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.switch {
  margin: 50px auto;
  position: relative;
}

.switch label {
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
}

.switch input {
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0;
  opacity: 0;
  z-index: 100;
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

/* DEMO 3 */

.switch.demo3 {
  width: 180px;
  height: 50px;
}

.switch.demo3 label {
  display: block;
  width: 100%;
  height: 100%;
  background: #a5a39d;
  border-radius: 40px;
  box-shadow:
      inset 0 3px 8px 1px rgba(0,0,0,0.2),
      0 1px 0 rgba(255,255,255,0.5);
}

.switch.demo3 label:after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -8px; right: -8px; bottom: -8px; left: -8px;
  border-radius: inherit;
  background: #ababab;
  background: -moz-linear-gradient(#f2f2f2, #ababab);
  background: -ms-linear-gradient(#f2f2f2, #ababab);
  background: -o-linear-gradient(#f2f2f2, #ababab);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#ababab));
  background: -webkit-linear-gradient(#f2f2f2, #ababab);
  background: linear-gradient(#f2f2f2, #ababab);
  box-shadow: 0 0 10px rgba(0,0,0,0.3),
        0 1px 1px rgba(0,0,0,0.25);
}

.switch.demo3 label:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -18px; right: -18px; bottom: -18px; left: -18px;
  border-radius: inherit;
  background: #eee;
  background: -moz-linear-gradient(#e5e7e6, #eee);
  background: -ms-linear-gradient(#e5e7e6, #eee);
  background: -o-linear-gradient(#e5e7e6, #eee);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#e5e7e6), to(#eee));
  background: -webkit-linear-gradient(#e5e7e6, #eee);
  background: linear-gradient(#e5e7e6, #eee);
  box-shadow:
      0 1px 0 rgba(255,255,255,0.5);
  -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  -ms-filter: blur(1px);
  -o-filter: blur(1px);
  filter: blur(1px);
}

.switch.demo3 label i {
  display: block;
  height: 100%;
  width: 60%;
  border-radius: inherit;
  background: silver;
  position: absolute;
  z-index: 2;
  right: 40%;
  top: 0;
  background: #b2ac9e;
  background: -moz-linear-gradient(#f7f2f6, #b2ac9e);
  background: -ms-linear-gradient(#f7f2f6, #b2ac9e);
  background: -o-linear-gradient(#f7f2f6, #b2ac9e);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#f7f2f6), to(#b2ac9e));
  background: -webkit-linear-gradient(#f7f2f6, #b2ac9e);
  background: linear-gradient(#f7f2f6, #b2ac9e);
  box-shadow:
      inset 0 1px 0 white,
      0 0 8px rgba(0,0,0,0.3),
      0 5px 5px rgba(0,0,0,0.2);
}

.switch.demo3 label i:after {
  content: "";
  position: absolute;
  left: 15%;
  top: 25%;
  width: 70%;
  height: 50%;
  background: #d2cbc3;
  background: -moz-linear-gradient(#cbc7bc, #d2cbc3);
  background: -ms-linear-gradient(#cbc7bc, #d2cbc3);
  background: -o-linear-gradient(#cbc7bc, #d2cbc3);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#cbc7bc), to(#d2cbc3));
  background: -webkit-linear-gradient(#cbc7bc, #d2cbc3);
  background: linear-gradient(#cbc7bc, #d2cbc3);
  border-radius: inherit;
}

.switch.demo3 label i:before {
  content: "off";
  text-transform: uppercase;
  font-style: normal;
  font-weight: bold;
  color: rgba(0,0,0,0.4);
  text-shadow: 0 1px 0 #bcb8ae, 0 -1px 0 #97958e;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 24px;
  position: absolute;
  top: 50%;
  margin-top: -12px;
  right: -50%;
}

.switch.demo3 input:checked ~ label {
  background: #9abb82;
}

.switch.demo3 input:checked ~ label i {
  right: -1%;
}

.switch.demo3 input:checked ~ label i:before {
  content: "on";
  right: 115%;
  color: #82a06a;
  text-shadow: 
    0 1px 0 #afcb9b,
    0 -1px 0 #6b8659;
}

<div class="switch demo3">
  <input type="checkbox">
  <label><i></i>
  </label>
</div>

<div class="switch demo3">
  <input type="checkbox" checked>
  <label><i></i>
  </label>
</div>

스 니펫 확장

— 유니 미
소스

@robertjd는 이것이 단순한 변환에 필요한 이유에 대해 혼란스러워했다

— Neil Chowdhury

@robertjd 이것도 체크 박스가 아닙니다. 그들은 토글입니다.

— TylerH

14

확인란의 모양은 기본적으로 고정 된 것으로 보입니다. 그러나 Worthy7이 지적한 것처럼 CSS appearance속성을 사용하여이를 해결할 수 있습니다 . 확인란을 완전히 비워서 나만의 모양을 정의 할 수 있습니다. 좋은 점 : 기존 HTML 코드를 사용할 수 있습니다. 단점 : 그것은 실험 기술입니다 입니다. Edge 및 IE는 사용자 지정 스타일을 사용하지 않습니다.

필요한 CSS 스타일은 다음과 같습니다.

input[type=checkbox] {
    width: 14mm;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 14mm;
    border: 0.1mm solid black;
}

input[type=checkbox]:checked {
    background-color: lightblue;
}

input[type=checkbox]:checked:after {
    margin-left: 4.3mm;
    margin-top: -0.4mm;
    width: 3mm;
    height: 10mm;
    border: solid white;
    border-width: 0 2mm 2mm 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    content: "";
    display: inline-block;
}

<label><input type="checkbox"> Test</label>

스 니펫 확장

스크린 샷 :

크롬:

Firefox :

가장자리:

IE :

— 잭 밀러
소스

8

나는 조금 더 큰 확인란을 만들고 37Signals Basecamp의 소스 코드를보고 다음 해결책을 찾았습니다.

글꼴 크기를 변경하여 확인란을 약간 크게 만들 수 있습니다.

font-size: x-large;

그런 다음 다음을 수행하여 확인란을 올바르게 맞출 수 있습니다.

vertical-align: top;
margin-top: 3px; /* change to center it */

— 저스틴
소스

3

font-size는 실제 체크 박스의 크기에 전혀 영향을 미치지 않는 것 같습니다

— Michael

나를 위해 일하지 않았다

— Amirhossein Tarmast

6

이 속성을 사용하여 Safari에서 확인란을 크게 만들 수 있습니다 (일반적인 접근 방식에 일반적으로 저항 함). -webkit-transform: scale(1.3, 1.3);

출처

— 아비 아마
소스

6

가장 간단한 해결책은 일부 사용자가 제안한대로 확인란의 스타일을 바꾸는 것입니다. 아래 CSS는 저에게 효과적이며 몇 줄의 CSS 만 필요하며 OP 질문에 대답합니다.

input[type=checkbox] {
    -webkit-appearance: none;
    -moz-appearance: none;
    vertical-align: middle;
    width: 14px; 
    height: 14px;
    font-size: 14px;
    background-color: #eee;
}

input[type=checkbox]:checked:after {
    position: relative;
    bottom: 3px;
    left: 1px;
    color: blue;
    content: "\2713"; /* check mark */
}

이 게시물에서 언급했듯이 확대 / 축소 속성은 Firefox에서 작동하지 않는 것으로 보이며 변환으로 인해 원하지 않는 효과가 발생할 수 있습니다.

Chrome 및 Firefox에서 테스트되었으며 모든 최신 브라우저에서 작동합니다. 속성 (색상, 크기, 하단, 왼쪽 등)을 원하는대로 변경하십시오. 그것이 도움이되기를 바랍니다!

— JCdotNET
소스

5

내 이해는 이것이 크로스 브라우저를 수행하는 것이 쉽지 않다는 것입니다. 확인란 컨트롤을 조작하는 대신 이미지, 자바 스크립트 및 숨겨진 입력 필드를 사용하여 항상 자체 구현을 구축 할 수 있습니다. 나는 이것이 niceforms (위의 Staicu lonut 's answer)와 유사하다고 가정하지만, 구현하기가 특히 어렵지는 않습니다. jQuery에는이 사용자 정의 동작을 허용하는 플러그인이 있다고 생각합니다 (링크를 찾아서 찾을 수 있으면 여기에 게시하십시오).

— 지방의
소스

3

이 CSS 전용 라이브러리가 매우 유용하다는 것을 알았습니다 : https://lokesh-coder.github.io/pretty-checkbox/

또는 @Sharcoux가 게시 한 것과 유사한 기본 개념으로 자신을 굴릴 수 있습니다. 기본적으로 다음과 같습니다.

일반 확인란을 숨 깁니다 (불투명도 0으로 이동)
CSS 기반 가짜 확인란 추가
사용하다 input:checked~div label 체크 스타일
를 <label>사용하여 클릭 할 수 있는지 확인하십시오.for=yourinputID

.pretty {
  position: relative;
  margin: 1em;
}
.pretty input {
  position: absolute;
  left: 0;
  top: 0;
  min-width: 1em;
  width: 100%;
  height: 100%;
  z-index: 2;
  opacity: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
}
.pretty-inner {
  box-sizing: border-box;
  position: relative;
}
.pretty-inner label {
  position: initial;
  display: inline-block;
  font-weight: 400;
  margin: 0;
  text-indent: 1.5em;
  min-width: calc(1em + 2px);
}
.pretty-inner label:after,
.pretty-inner label:before {
  content: '';
  width: calc(1em + 2px);
  height: calc(1em + 2px);
  display: block;
  box-sizing: border-box;
  border-radius: 0;
  border: 1px solid transparent;
  z-index: 0;
  position: absolute;
  left: 0;
  top: 0;
  background-color: transparent;
}
.pretty-inner label:before {
  border-color: #bdc3c7;
}
.pretty input:checked~.pretty-inner label:after {
  background-color: #00bb82;
  width: calc(1em - 6px);
  height: calc(1em - 6px);
  top: 4px;
  left: 4px;
}


/* Add checkmark character style */
.pretty input:checked~.pretty-inner.checkmark:after {
  content: '\2713';
  color: #fff;
  position: absolute;
  font-size: 0.65em;
  left: 6px;
  top: 3px;
}



body {
  font-size: 20px;
  font-family: sans-serif;
}

<div class="pretty">
	<input type="checkbox" id="demo" name="demo">
	<div class="pretty-inner"><label for="demo">I agree.</label></div>
</div>

<div class="pretty">
	<input type="checkbox" id="demo" name="demo">
	<div class="pretty-inner checkmark"><label for="demo">Please check the box.</label></div>
</div>

스 니펫 확장

— squarecandy
소스

3

문제는 Firefox가 너비와 높이를 듣지 않는다는 것입니다. 그것과 당신의 좋은 것을 비활성화하십시오.

input[type=checkbox] {
    width: 25px;
    height: 25px;
    -moz-appearance: none;
}

<label><input type="checkbox"> Test</label>

스 니펫 확장

— 가치있는 7
소스

3

다른 답변에는 픽셀 화 된 확인란이 표시되어 있지만 아름다운 것을 원했습니다. 결과는 다음과 같습니다.

이 버전이 더 복잡하지만 시도해 볼 가치가 있다고 생각합니다.

.checkbox-list__item {
  position: relative;
  padding: 10px 0;
  display: block;
  cursor: pointer;
  margin: 0 0 0 34px;
  border-bottom: 1px solid #b4bcc2;
}
.checkbox-list__item:last-of-type {
  border-bottom: 0;
}

.checkbox-list__check {
  width: 18px;
  height: 18px;
  border: 3px solid #b4bcc2;
  position: absolute;
  left: -34px;
  top: 50%;
  margin-top: -12px;
  transition: border .3s ease;
  border-radius: 5px;
}
.checkbox-list__check:before {
  position: absolute;
  display: block;
  width: 18px;
  height: 22px;
  top: -2px;
  left: 0px;
  padding-left: 2px;
  background-color: transparent;
  transition: background-color .3s ease;
  content: '\2713';
  font-family: initial;
  font-size: 19px;
  color: white;
}

input[type="checkbox"]:checked ~ .checkbox-list__check {
  border-color: #5bc0de;
}
input[type="checkbox"]:checked ~ .checkbox-list__check:before {
  background-color: #5bc0de;
}

<label class="checkbox-list__item">
  <input class="checkbox_buttons" type="checkbox" checked="checked" style="display: none;">
  <div class="checkbox-list__check"></div>
</label>

스 니펫 확장

JSFiddle : https://jsfiddle.net/asbd4hpr/

— hcarreras
소스

0

아래 코드에서 높이와 너비를 조정할 수 있습니다

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    border-radius:5px;
    border:1px solid #ff7e02;
}

<div class="check">

     <label class="container1">Architecture/Landscape
										  

    <input type="checkbox" checked="checked">
										  

    <span class="checkmark"></span>
								 

	</label>
</div>

스 니펫 확장

— 루치 카 바수
소스