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

Program / 글쓴이

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

답변

이것이 누구에게나 도움이 될 수 있다면 여기에 간단한 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;}

답변

나는 변화 시도 padding와 margin잘으로 width하고 height, 다음 마지막으로 당신은 단지 규모를 증가시킬 경우 작동합니다 발견 :

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

답변

다음은 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');
    });
}

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

도움이되기를 바랍니다.

답변

흐릿한 크기 조정이나 손쉬운 변형없이 순수 현대 2020 CSS 전용 결정. 그리고 진드기와 함께! =)

Firefox 및 Chromium 기반 브라우저에서 잘 작동합니다.

따라서 부모 블록을 설정하는 것만으로 체크 박스를 순전히 ADAPTIVE를 지배 할 수 font-height있으며 텍스트와 함께 커집니다!

input[type='checkbox'] {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  vertical-align: middle;
  outline: none;
  font-size: inherit;
  cursor: pointer;
  width: 1.0em;
  height: 1.0em;
  background: white;
  border-radius: 0.25em;
  border: 0.125em solid #555;
  position: relative;
}

input[type='checkbox']:checked {
  background: #adf;
}

input[type='checkbox']:checked:after {
  content: "✔";
  position: absolute;
  font-size: 90%;
  left: 0.0625em;
  top: -0.25em;
}
<label for="check1"><input type="checkbox" id="check1" checked="checked" /> checkbox one</label>
<label for="check2"><input type="checkbox" id="check2" /> another checkbox</label>

스 니펫 확장