復選框樣式僅CSS

Question

我有一個復選框，我想為其設置樣式。 如果未選中該復選框，則邊框應為黑色；選中該復選框時，孔復選框應為黑色且不帶鈎。 在下面您可以看到我到目前為止所做的事情。 可悲的是它不會工作。

我的代碼：

<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;
}

我的代碼的第一部分應該隱藏當前的復選框。 如果未選中該框，則第二部分應為復選框，而選中該框時，第二部分應為復選框。 我認為這就是您設計這些復選框的方式。 我究竟做錯了什么？

Answer 1

這可能對您有幫助

 .checkbox input[type=checkbox] { display: none; } .checkbox input[type=checkbox]:not(:checked) + label:before { content: ""; border: 2px solid #000; height: 10px; width: 10px; display: inline-block; } .checkbox input[type=checkbox]:checked + label:before { content: ""; border: 2px solid #000; height: 10px; width: 10px; background: #000; display: inline-block; } 

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

Answer 2

您需要對代碼做的第一件事是添加label ，例如：

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

我還向該復選框添加了id和name屬性。 id必須與label上的for屬性相同，此技巧才能起作用。

接下來，我們需要顯式隱藏該復選框。 我傾向於在CSS中使用一類sr-only來根據Yahoo的示例明顯地隱藏事物：

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

接下來，我們在標簽before創建一個偽元素。 對於樣式規則，當標簽是復選框的相鄰兄弟時，我使用相鄰的兄弟選擇器（ + ）來應用規則。 我保留了您的班級名稱，因此它將僅定位到班級newsletter同級標簽：

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

:not(checked)表示不檢查newsletter時應用這些規則。

要在checked newsletter時更改樣式，我們可以像這樣更改背景色：

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

這樣，單擊我們的偽復選框或標簽中的文本將選中該復選框（完全單擊標簽會將焦點發送到該字段，因此帶有復選框將對其進行選中）。