复选框样式只有CSS [英] Checkbox styling only css

问题描述

我有一个复选框，我想对它进行设置。当复选框未被选中时，它应该有一个黑色的边框，当复选框被选中时，复选框应该是黑色的，没有挂钩。下面你看到我到目前为止做了什么。

我的代码：

 < form> ; 
< input class =newslettertype =checkboxvalue =text> Ichmöchteden Newsletter bekommen 
< / form> 
 
 input [type = checkbox]：not（old）{
 width：13px; 
保证金：0; 
 padding：0; 
 opacity：0; 
} 
 
 .newsletter：未勾选{
 width：13px; 
 height：13px; 
 border：2px纯黑色; 
 border-radius：3px; 
} 
 
 .newsletter：checked {
 width：13px; 
 height：13px; 
 border：2px纯黑色; 
背景颜色：黑色; 
 border-radius：3px; 
} 
  

我的代码的第一部分应该隐藏当前的复选框。第二部分应该是未选中框时的复选框以及第三部分框选中时的复选框。我认为这是你如何设计这些复选框。我做错了什么？

解决方案

你需要做的第一件事是添加一个标签，例如：

 < form> 
< input class =newslettertype =checkboxvalue =textid =newslettername =newsletter> 
< label for =newsletter> Ichmöchteden Newsletter bekommen< / label> 
< / form> 
  

我还添加了 id 和名称属性复选框。 id 需要与标签中的属性相同$ c>这个技巧可以工作。



接下来，我们需要明显地隐藏复选框。我倾向于在CSS中使用一个 sr-only 类来隐藏基于 Yahoo的例子：



  .sr-only {
 height：1px; 
 width：1px; 
 overflow：hidden 
 clip：rect（1px，1px，1px，1px）; 
位置：绝对; 
} 
  

接下来我们在之前创建一个伪元素 c $ c>标签。对于样式规则，我使用相邻的兄弟选择器（ + ）在标签是复选框的相邻兄弟时应用规则。我保留你的类名，所以它只会定位类通讯的兄弟姐妹：

  .newsletter：not（checked）+ label：before {
 content：; 
 display：inline-block; 
 width：13px; 
 height：13px; 
 border：2px纯黑色; 
 border-radius：3px; 
 
  

：not（checked）表示当 newsletter> 未被选中时应用这些规则。



在通讯为选中时更改样式改变背景颜色：



  .newsletter：checked + label：before {
 background-color：black; 
} 
  

通过这种方式，点击我们的伪复选框或标签中的文本将勾选框（点击标签都会将焦点发送到该字段，所以用复选框将会检查它）。


I have a checkbox and i would like to style it. When the checkbox is unchecked it should have a black border and when the checkbox is checked the hole checkbox should be black without hook. Below you see what i have done so far. Sadly it wont work.

My Code:

<form>
    <input class="newsletter" type="checkbox" value="text">Ich möchte den Newsletter bekommen
</form>

input[type=checkbox]:not(old){
  width     : 13px;
  margin    : 0;
  padding   : 0;
  opacity   : 0;
}  

.newsletter:unchecked{
    width:13px;
    height: 13px;
    border: 2px solid black;
border-radius:3px;
}

.newsletter:checked{
    width:13px;
    height: 13px;
    border: 2px solid black;
    background-color:black;
border-radius:3px;
}

The first part of my code should hide the current checkbox. The second part should be the checkbox when the box is unchecked and the third part when the box is checked. I thought this is how you are styling these checkboxes. What am i doing wrong?

解决方案

The first thing you need to do with your code is add a label, e.g.:

<form>
  <input class="newsletter" type="checkbox" value="text" id="newsletter" name="newsletter">
   <label for="newsletter">Ich möchte den Newsletter bekommen</label>
</form>

I've also added an id and name attribute to the checkbox. The id needs to be the same as the for attribute on the label for this trick to work.

Next, we need to visibly hide the checkbox. I tend to use a class of sr-only in the CSS to visibly hide things based on Yahoo's example:

.sr-only{
  height: 1px;
  width: 1px;
  overflow: hidden
  clip: rect(1px,1px,1px,1px);
  position: absolute;
}  

Next we create a pseudo element before the label. For the style rules I'm using the adjacent sibling selector (+) to apply the rules when the label is an adjacent sibling of the checkbox. I'm keeping your class name so it'll only target labels that're siblings of class newsletter:

.newsletter:not(checked) + label:before{
  content:" ";  
  display: inline-block;
  width:13px;
  height: 13px;
  border: 2px solid black;
  border-radius:3px;
}

The :not(checked) means apply these rules when newsletter is not checked.

To change the styles when newsletter is checked we change the background colour like this:

.newsletter:checked + label:before{
 background-color:black;
}

This way clicking our pseudo checkbox or the text in the label will check the box (clicking the label at all sends focus to the field, so with a checkbox will check it).

这篇关于复选框样式只有CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！