移动浏览器上更大的复选框

Question

我在 Stackoverflow 和其他资源中查看了许多关于如何制作更大复选框的问答。提供的所有解决方案都不会显示一个更大的简单复选框。

有很多解决方案。许多是几年前的。一切都不一样。

我有兴趣在移动设备上创建 2 倍或 3 倍大的复选框。事实上，如果它们在桌面浏览器上更大，那也很好。

在 2016 年获得更大复选框的最佳方式是什么？

我不想要带有有趣的复选标记或一些“替代复选标记”的“奇怪”复选框。

只是一个普通的复选框...但更大。另外...描述复选框的文本应该正确对齐。

谢谢

Answer 1

我会使用简单的设置 width/height 加上 -moz-appearance 用于 firefox 和 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

Answer 2

您可以使用变换比例缩放任何 html 元素...复选框是一个 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 */
}