选中后如何在复选框周围应用边框？

Question

我想检查一个复选框，并通过一个封闭的span标记在它周围应用1px边框。

我有点担心如何检测已检查的css属性并选择父跨度以将属性应用于跨度？我只用CSS实现这个目标吗？以下是我到目前为止的情况。

CSS（萨斯）

input.checkbox
    opacity: 0

span.check
    width: 16px
    height: 16px
    border: 2px solid black
    display: inline-block
    position: relative

input.checkbox:checked  <--once i detect checked I am unsure how to apply the border to the parent span tag
    background: black
    position: absolute
    top: -8px
    left: 0px

HTML

<span class='check'><input type="checkbox" class="checkbox" name="" /></span>

Answer 1

根本没有，

级联并不像那样。您无法在parent中选择CSS。但是，你可以通过使用sass / scss来做到这一点。但它会无法按预期工作。

它只会创建一个父包装类。但它不会使用子元素的状态。因为在编译后它只是CSS

我们将来可能会有一个父选择器，可能在CSS4中。所以我们保持手指交叉。 ：）

e.g。

SASS

input.checkbox
    opacity: 0

span.check
    width: 16px
    height: 16px
    border: 2px solid black
    display: inline-block
    position: relative

input.checkbox:checked
    background: black
    position: absolute
    top: -8px
    left: 0px

    span.check &
        border: 2px solid black

输出CSS，

input.checkbox {
  opacity: 0;
}

span.check {
  width: 16px;
  height: 16px;
  border: 2px solid black;
  display: inline-block;
  position: relative;
}

input.checkbox:checked {
  background: black;
  position: absolute;
  top: -8px;
  left: 0px;
}
span.check input.checkbox:checked {
  border: 2px solid black;
}

但您可以使用CSS siblings选择器

来实现此目的

<强> HTML，

<label>
  <input class="checkbox" type="checkbox">
  <span class="check"></span>
</label>

<强> CSS，

label {
   position: relative;
} 
input.checkbox {
    opacity: 1;
    position: absolute;
}

input.checkbox:checked + span.check {
    width: 16px;
    height: 16px;
    border: 2px solid black;
    display: inline-block;
    position: absolute;
}

工作示例：https://jsfiddle.net/HA3bQ/167/

Answer 2

无法选择仅使用CSS的父级（直到CSS4），因此必须使用JS ..

请参阅此帖，谈论它here。

Answer 3

我还没有看到使用CSS完成，只在复选框所在的javascript中。

Answer 4

您可以在输入后放置一些元素

<label>
  <input class="checkbox" type="checkbox">
  <span class="checkmark></span>
</label>

带有伪类:checked的样式

.checkbox:checked ~ .checkmark {
  // There goes styles for custom checkmark
}

建议请查看此site以获取完整示例

Answer 5

简单的答案就是在css风格中使用大纲

＆＃13;

＆＃13;

input.checkbox:checked  {
 outline: 2px solid black;
	}

＆＃13;

<span class='check'><input type="checkbox" class="checkbox" name="" /></span>

＆＃13;

＆＃13;

＆＃13;