Question

我想要一个div元素，就像一个复选框。当用户点击一次时，左上角会出现一个复选框。如果用户再次单击div，则复选框将消失。目前，我正在使用以下CSS，可在此Fiddle中看到。

.my-checkfield {
  border: solid 1px black;
  color: black;
  padding: 24px;
  position: relative;
}

.my-checkfield-selected {
  border: solid 1px green;
}

.my-checkfield-selected::before,
.my-checkfield-selected::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-color: transparent;
  border-style: solid;
}

.my-checkfield-selected::before {
  border-width: 0;
}

.my-checkfield-selected::after {
  border-radius: 0;
  border-width: 12px;
  border-left-color: green;
  border-top-color: green;
}

如小提琴所示，三角形成功切换。但是，我想在该三角形中显示一个白色复选标记。我怎么能这样做，最好是用CSS。我不知道该往哪里去。

谢谢，

Answer 1

通过交换::before / ::after，因此::before用于绿色角落，您只需添加content: '\2713'（\2713即CSS checkmark 的代码）到::after

＆＃13;

function toggle(elem) {
  $(elem).toggleClass('my-checkfield-selected');
}

＆＃13;

.my-checkfield {
  border: solid 1px black;
  color: black;
  padding: 24px;
  position: relative;
}

.my-checkfield-selected {
  border: solid 1px green;
}

.my-checkfield-selected::before,
.my-checkfield-selected::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-color: transparent;
  border-style: solid;
}

.my-checkfield-selected::after {
  content: '\2713';
  font-size: 13px;
  line-height: 13px;
  font-weight: bold;
  color: white;
}

.my-checkfield-selected::before {
  border-radius: 0;
  border-width: 12px;
  border-left-color: green;
  border-top-color: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="my-checkfield" onclick="toggle(this)">
  [hi]
</div>

＆＃13;

Answer 2

您不能将任何内容放在仅由边框组成的元素（或伪元素）中。

因此，作为建议，您需要使用方形伪元素，将图像作为背景，然后使用 second 渐变背景作为颜色。

.my-checkfield {
  border: solid 1px black;
  color: black;
  padding: 24px;
  position: relative;
}

.my-checkfield::before,
.my-checkfield::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  background-image: 
  url(http://www.clker.com/cliparts/p/e/X/9/d/4/check-mark-white-md.png), 
  linear-gradient(135deg, green 50%, transparent 50%);
  background-size: 70% auto, cover;
  background-position: auto, left top;
  background-repeat: no-repeat;
}

<div class="my-checkfield" ) ">
  [hi]
</div>

CSS - 在div的左上角发布复选标记

2 个答案: