Question

我在Stackoverflow和其他有关如何制作更大复选框的来源上查看了很多问答。提供的所有解决方案都没有显示更大的简单复选框。

有很多解决方案。许多人来自几年前。一切都不一样。

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

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

我不想要“怪异”的复选框，其中有一个有趣的复选标记，或一些“替代复选标记”。

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

由于

Answer 1

您可以使用变换比例缩放任何html元素... Checkbox是一个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表示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

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

2 个答案: