웹 페이지의 체크 박스 – 어떻게 더 크게 만들 수 있습니까?

웹 페이지의 체크 박스 – 어떻게 더 크게 만들 수 있습니까?

---

대부분의 브라우저에서 렌더링되는 표준 체크 박스는 매우 작고 더 큰 글꼴을 사용해도 크기가 증가하지 않습니다. 더 큰 확인란을 표시하는 가장 좋은 브라우저 독립적 인 방법은 무엇입니까?

---

이것이 누구에게나 도움이 될 수 있다면 여기에 간단한 CSS가 있습니다. 토글 된 배경색을 사용하여 엄지 손가락에 충분히 큰 기본 둥근 사각형으로 바꿉니다.

input[type='checkbox'] {
    -webkit-appearance:none;
    width:30px;
    height:30px;
    background:white;
    border-radius:5px;
    border:2px solid #555;
}
input[type='checkbox']:checked {
    background: #abd;
}

<input type="checkbox" />

---

실제로 다른 것과 마찬가지로 확인란을 더 크게 만드는 방법이 있습니다 (페이스 북 버튼과 같은 iframe도 포함).

"확대 된"요소로 래핑합니다.

.double {
  zoom: 2;
  transform: scale(2);
  -ms-transform: scale(2);
  -webkit-transform: scale(2);
  -o-transform: scale(2);
  -moz-transform: scale(2);
  transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
}

<div class="double">
  <input type="checkbox" name="hello" value="1">
</div>

약간 "크기가 조정 된"것처럼 보일 수 있지만 작동합니다.

물론 div를 float : left로 만들고 그 외에 레이블을 float : left도 넣을 수 있습니다.

---

이 CSS를 사용해보십시오

input[type=checkbox] {width:100px; height:100px;}

---

다음은 IE8 이하를 지원하기 위해 자바 스크립트로 개선 할 수있는 CSS 전용 솔루션으로 최신 브라우저 (IE9 +)에서 작동하는 트릭입니다.

<div>
  <input type="checkbox" id="checkboxID" name="checkboxName" value="whatever" />
  <label for="checkboxID"> </label>
</div>

label확인란의 모양을 원하는 스타일로 지정

#checkboxID
{
  position: absolute fixed;
  margin-right: 2000px;
  right: 100%;
}
#checkboxID + label
{
  /* unchecked state */
}
#checkboxID:checked + label
{
  /* checked state */
}

자바 스크립트의 경우 라벨에 클래스를 추가하여 상태를 표시 할 수 있습니다. 또한 다음 기능을 사용하는 것이 좋습니다.

$('label[for]').live('click', function(e){
  $('#' + $(this).attr('for') ).click();
  return false;
});

#checkboxID스타일 을 수정하려면 편집

---

저는 phonegap 앱을 작성하고 있으며 체크 박스는 크기, 모양 등이 다양합니다. 그래서 간단한 체크 박스를 만들었습니다.

먼저 HTML 코드 :

<span role="checkbox"/>

그런 다음 CSS :

[role=checkbox]{
    background-image: url(../img/checkbox_nc.png);
    height: 15px;
    width: 15px;
    display: inline-block;
    margin: 0 5px 0 5px;
    cursor: pointer;
}

.checked[role=checkbox]{
    background-image: url(../img/checkbox_c.png);
}

확인란 상태를 전환하기 위해 JQuery를 사용했습니다.

CLICKEVENT='touchend';
function createCheckboxes()
{
    $('[role=checkbox]').bind(CLICKEVENT,function()
    {
        $(this).toggleClass('checked');
    });
}

하지만 그것 없이는 쉽게 할 수 있습니다 ...

도움이되기를 바랍니다.

참고 URL : https://stackoverflow.com/questions/4137255/checkboxes-in-web-pages-how-to-make-them-bigger