Question

我需要使用CSS而不是图像在复选框中创建一个勾号。

我可以看到正确显示绿色'✔'。但是css的顶部和左边只是不工作，勾选标志总是卡在复选框的左上角，我希望它在中间。为什么内容和颜色属性有效但左侧和顶部不起作用？

Answer 1

顶部和左侧不适用于静态元素，您需要指定相对位置，固定位置或绝对位置才能使用这些属性。你可以试试这个：

structure(list(x = structure(1:3, .Label = c("A", "B", "C"), class = "factor"), 
    low = c(-10, 100, 10), up = c(200, 350, 20), values = c("1,2,3,150", 
    "125,225,325", "15")), class = c("tbl_df", "tbl", "data.frame"
), .Names = c("x", "low", "up", "values"), row.names = c(NA, 
-3L))

# A tibble: 3 x 4
       x   low    up      values
  <fctr> <dbl> <dbl>       <chr>
1      A   -10   200   1,2,3,150
2      B   100   350 125,225,325
3      C    10    20          15

完整代码：

input[type=checkbox]:checked ~ .icon:after, ._checked input[type=checkbox] ~ .icon :after {
    background-position: 0 -800px;
    content: '✔';
    font-size: 25px;
    margin: auto;
    top: 15px;
    left: 250px;
    color: green;
    position: relative;
}

input[type=checkbox]:focus+.icon {
  background-position: 0 -822px;
}

input[type=checkbox]:checked~.icon,
._checked input[type=checkbox]~.icon {
  background-position: 0 -856px;
  background-color: #2196F3;
  display: block;
}

input[type=checkbox]:checked~.icon:after,
._checked input[type=checkbox]~.icon :after {
  background-position: 0 -800px;
  content: '✔';
  font-size: 25px;
  margin: auto;
  top: 5px;
  left: 50%;
  margin-left:-12px;
  color: green;
  position:relative;
}

input[type=checkbox]:not(:checked)+div.validationsContainer~.icon {
  background-position: 0 -890px;
}

,
input[type=checkbox]:checked:hover+label,
input[type=checkbox]:checked:focus+label {
  background-position: 0 15.3%;
}

&.hasError .icon {
  background-position: 0 -890px;
}

复选框中伪类的css位置不起作用

1 个答案: