Question

我们一直在使用transform：scale（1.5）来调整复选框的大小。最近浏览器发生了一些变化，因为它已不再有效。例如，今天（2015年4月30日）更新的Chrome版本42.0.2311.135（64位）上，以下代码无效。大小跃升至约3倍。更改比例编号（例如更改为1.1）无效。

<html>
<head></head>
<body>
    <input type="checkbox" style="-webkit-transform:scale(1.5)">
</body>
</html>

那么，有没有人知道如何使用当前浏览器调整复选框的大小？我已经尝试了所有我读过的解决方案（font-size：x-large，设置高度，宽度，字体大小......）

Answer 1

设置复选框元素的样式非常困难。我倾向于隐藏复选框本身，引入一个兄弟元素来显示状态。我工作过的简化/编辑代码：

<强>标记

<label class="checkbox">
    <input type="checkbox">
    <span class="checkbox__icon"></span>
</label>

<强> SASS

.checkbox {
    .checkbox__icon {
        /* styling for checkbox goes here */
    }
    input[type=checkbox] {
        display: none;
        &:checked ~ .checkbox__icon {
            /* styling for checked checkbox goes here */
        }
        &:disabled ~ .checkbox__icon {
            /* styling for disabled checkbox goes here */
        }
    }
}

跨度可以包含字体图标，svg背景图像，无论您喜欢什么。但无论你采用什么方法，结果都是你可以控制它在浏览器中的外观。

如何使用css调整输入[type = checkbox]元素的大小

1 个答案: