有CSS複選框whithoud ID和？

Question

如何我可以做一個css ckeckbox + lebel沒有id和for。

我用這種方式，但它dosnt幹活可以有一個CSS ckeckbox絲毫id和for這樣的：

<div class="checkbox"> 
    <input id="f" type="checkbox" name="hi" class="checkbox" /> 
    <label for="f">Hello</label> 
</div> 

但我想有這樣的：

<label class="checkbox"> 
<input type="checkbox" value="1" name="files" > 
</label> 

然後我使用這個CSS（實際上是SCSS）：

label{ 
    input[type=checkbox]{ 
     display: none; 
    } 
} 

.checkbox{ 
    position: relative; 
    display: inline-block; 
    margin-right: 7px; 
    cursor: pointer; 
    vertical-align: middle; 
    &:after{ 
     content: ' '; 
     position: absolute; 
     border: 2px solid $black; 
     border-radius: 3px; 
     width: 20px; 
     height: 20px; 
     top: -5px; 
     left: -2px; 
     width: 14px; 
     height: 14px; 
    } 
    &:checked{ 
     font-family: 'FontAwesome'; 
     font-size: 2em; 
     content: "\f00c"; 
     color: $blue; 
     border-radius: 3px; 
    } 
} 
/* It dosnt work */ 
.checkbox:after > input[type=checkbox]:checked { 
     font-family: 'FontAwesome'; 
     font-size: 2em; 
     content: "\f00c"; 
     color: $blue; 
     border-radius: 3px; 
} 

但是選中複選框dost show？

請幫助:)

Answer 1

您必須在Label標籤使用範圍。

.checkbox:after > input[type=checkbox]:checked 

這條線沒有道理，因爲它的需要是相反的。所以我就改成這樣：

input[type=checkbox]:checked ~ .checkbox:after 

當你檢查？做下一個元素的東西。

因此，我添加一個跨度來完成您的問題。在這裏，我們去：

Working Fiddle

$blue : blue; 
 
$black : black; 
 

 
label{ 
 
    input[type=checkbox]{ 
 
     opacity: 0; 
 
    } 
 
} 
 

 
.checkbox{ 
 
    position: relative; 
 
    display: inline-block; 
 
    margin-right: 7px; 
 
    cursor: pointer; 
 
    vertical-align: middle; 
 
    &:after{ 
 
     content: ' '; 
 
     position: absolute; 
 
     border: 2px solid $black; 
 
     border-radius: 3px; 
 
     width: 20px; 
 
     height: 20px; 
 
     top: -5px; 
 
     left: -2px; 
 
     width: 14px; 
 
     height: 14px; 
 
    } 
 
    &:checked{ 
 
     font-family: 'FontAwesome'; 
 
     font-size: 2em; 
 
     content: "\f00c"; 
 
     color: $blue; 
 
     border-radius: 3px; 
 
    } 
 
} 
 
/* It dosnt work */ 
 
input[type=checkbox]:checked ~ .checkbox:after{ 
 
     font-family: 'FontAwesome'; 
 
     font-size: 1em; 
 
     content: "\f00c"; 
 
     color: $blue; 
 
     border-radius: 3px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 
<label> 
 
    <input type="checkbox" value="1" name="files" > 
 
    <span class="checkbox"></span> 
 
</label>