如何增加复选框内容css的大小？

Question

如何在选中复选框 内容

后更改字体大小

这是我的代码

.checkbox-custom {
  opacity: 0;
  position: absolute;
}
.checkbox-custom, .checkbox-custom-label {
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
  cursor: pointer;
}
.checkbox-custom-label {
  position: relative;
}
.checkbox-custom + .checkbox-custom-label:before {
  content: ' ';
  background: transparent;
  border: 1px solid #666666;
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  padding: 2px;
  margin-right: 10px;
  text-align: center;
}
.checkbox-custom:checked + .checkbox-custom-label:before {
  background: transparent;
  border: 1px solid #666666;
  content: 'X';
}

<div>
  <input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox">
  <label for="checkbox-1" class="checkbox-custom-label">checkbox1</label>
</div>

选中复选框后

  

内容：'X';

字体大小增加。如果有可能吗？

这是我的FIDDLE

当前输出

期待输出

Answer 1

如果你希望它看起来像线条，根据你的图片，你可以利用背景图像渐变。

要计算线的16.5-17.5，我们使用毕达哥拉斯＆＃39; theorum。您的复选框的高度和宽度为（20px + 2px + 2px = height + padding + padding）24。所以sqrt(24*2 + 24*2) = sqrt(1152) = 33.94 = ~34。我们想要中间点，因此除以2 34 / 2 = 17，我们希望它是1px线，因此移动.5 = {{1}两侧像素的17 }}

如果你想＆＃34;胖子＆＃34;该行，只需分别减少和增加数字16.5-17.5和16.5。

17.5

<强> UPDATED FIDDLE

PS。如果你打算在生产中使用它，不要忘记查看供应商前缀，有很多工具可以做到这一点，但最简单的方法是：在JSFiddle中，将光标设置在包含{{1}之一的行上}并点击 TAB 键（Prefixed fiddle）。

Answer 2

.checkbox-custom {
    height: 50px;
    width: 300px;
}

我希望这会对你有所帮助。