时间戳

首页 > 解决方案 > 复选框中的刻度线大小

html - 复选框中的刻度线大小

问题描述

在我的 Angular 应用程序中。我正在使用输入类型复选框。我正在尝试更改复选框的大小。我可以增加复选框的大小。但是，当复选框被选中时，刻度线的大小显得非常小，不适合复选框的大小。如何增加刻度线的大小以使其适合复选框。

HTML

<input type="checkbox" class="customInput">

css

.customInput {
  width: 2em;
  height: 2em;
}

标签： htmlcss

解决方案

使用自定义元素来设置表单输入的样式：

.form-input input {
    display: none;
}

.form-input .checkbox {
    border: 1px solid black;
    border-radius: 3px;
    width: 20px;
    height: 20px;
    text-align: center;
}

.form-input input:checked + .checkbox:before {
    content: '\2713';
    display: inline;
}
<label class="form-input">
  <input type="checkbox"/>
  <div class="checkbox"></div>
</label>

推荐阅读