Question

我正在创建一些自定义复选框。我隐藏了标准复选框并将其替换为以下内容：

.newcheckbox:before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 2px;
  background-color: rgba(29, 190, 96, 0.1);
  border: 1px solid #1DBE60;
}

input[type="checkbox"]:checked + .newcheckbox:before {
  color: #FFF;
  background-color: #1DBE60;
  content: "\2022";
  font-size: 20px;
  text-align: center;
}

问题是，当我添加'内容'时，当复选框处于选中状态时，其高度会发生变化，其下方的元素会跳跃。我一直在纠缠造成这种情况的大脑。

这是一个Plunk，展示了这个问题：http://plnkr.co/edit/Kc7XmgR4Nogx0w6Pmx9y?p=preview

您可以看到，当您删除“内容”时，它不会跳转。

Answer 1

将DataGrid添加到所有<DataGrid ItemsSource="{Binding Items}" AutoGenerateColumns="True" SelectionMode="Single" SelectionUnit="Cell" IsReadOnly="True" />

这里的片段

overflow:hidden

input[type="checkbox"]:checked

自定义复选框正在更改大小

1 个答案: