自定义复选框在单击时更改位置答案

【问题标题】：Custom checkbox changing position on click自定义复选框在单击时更改位置
【发布时间】：2016-11-08 19:11:51
【问题描述】：

我想我遗漏了一些东西，但我找不到以下问题的解决方案。

我在句子列表中使用自定义复选框。起初它看起来不错，但是一旦您选中第一个复选框，它就会移动。我不知道为什么一旦您检查复选框就会移动？

这是一个小提琴：https://jsfiddle.net/Hodor_/vhhj7huv/
我注意到通过将content: "/2714"; 更改为content: ""; 单击时复选框不会移动。

无法理解内容如何影响复选框的位置。

在其他问题中，我看到了使用 vertical-align:middle 的建议，它对我不起作用。

有什么想法吗？

【问题讨论】：

您使用的是哪个浏览器，因为对我来说，在 Chrome 上您的代码运行良好。

标签： css angularjs checkbox

【解决方案1】：

问题在于您将display: flex 与position: absolute 结合使用。它并不总是很好。

要解决此问题，您需要进行 3 项简单更改：

1) 从您的 label:before 中删除 position: absolute

2) 从您的label 中删除padding: 0 0 0 50px;

3) 将margin-right: 20px（或任何你想要的）添加到label:before。

简单.. 所以你的最终代码看起来像 - Fiddle here

label{
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 30px;
  cursor:pointer;
  color black;
}

label:before{
  /* position:absolute; */
  content:"";
  display:flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  width: 30px;
  left: 25px;
  text-align:center;
  font-size: 20px;
  color: white;
  border: 1px solid #9b9b9b;
  border-radius: 4px;
  transition: all 0.5s ease;
  margin-right: 20px;
}

记住：flexbox 允许您对元素进行“灵活”或流式控制，它为您的元素提供了更灵活的性质，可以根据您的要求自行定位元素。
而
position: absolute 则完全相反。它将元素从文档中取出并让您通过方向（left、right、top、bottom）将其放置在您想要的位置，它更像是一个“rigid”或顽固的控制元素的方式。

【讨论】：

感谢您的详细说明。无法理解如何定位 :before 元素，因此尝试了多种方式。既然您提到了它，使用绝对位置并不是一个好习惯。干杯！

【解决方案2】：

我用text-indent隐藏了内容，所以基本上内容一直在，复选框现在不动了。

Here 工作小提琴。

【讨论】：

试过了，它也有效。更喜欢@NikhilNanjappa 的解决方案，因为我认为这是一种更好的做法。无论如何，你的答案都投了赞成票。谢谢。