모바일 브라우저의 큰 체크 박스

Question

더 큰 체크 박스를 만드는 방법에 대한 자세한 내용은 Stackoverflow 및 기타 소스에서 많은 Q & A를 살펴 보았습니다. 제공된 모든 솔루션은 간단한 체크 박스를 더 크게 표시하지 않습니다.

많은 솔루션이 있습니다. 많은 사람들이 몇 년 전부터 있습니다. 모두 다르다.

휴대 기기에서 2 배 또는 3 배 큰 체크 박스를 만드는 데 관심이 있습니다. 사실 데스크톱 브라우저가 더 큰 경우에도 괜찮습니다.

2016 년에 더 큰 확인란을 선택하는 가장 좋은 방법은 무엇입니까?

나는 이상한 체크 표시가 있거나 재미있는 체크 표시가있는 곳을 원하지 않습니다.

정상적인 체크 박스 ...하지만 커집니다. 또한 ... 확인란을 설명하는 텍스트가 올바르게 정렬되어야합니다.

감사

당신은 변환 규모 어떤 HTML 요소를 확장 할 수 있습니다

Answer 1

는 ... 체크 박스는 HTML 요소, 그것뿐만 아니라 확장 할 수 있습니다 그리고 당신은 스케일링을하기 위해 다른 뷰포트에 상대적으로 다른 스케일을 지정할 수 있습니다 장치와 호환이

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

Answer 2

나는 간단한 정렬을 위해 width/height 플러스 파이어 폭스에 대한 -moz-appearance 및 인 flexbox 설정과 함께 갈 것입니다에 .. 전망.

<div class="form-holder"> 
    <input type="checkbox" id="checkbox" /> 
    <label for="checkbox">This is label for checkbox</label> 
</div> 

@media all and (max-width: 600px) { 
    input[type="checkbox"] { 
    width: 25px; 
    height: 25px; 
    } 
} 

@media all and (max-width: 320px) { 
    input[type="checkbox"] { 
    width: 40px; 
    height: 40px; 
    } 
} 

.form-holder { 
    display: flex; 
    justify-content: flex-start; 
    align-items: center; 
} 

demo fiddle