取代與圖像，圖標或背景的複選框，並保持功能

我有一個複選框的形式。我希望複選框和標籤不可見，並用圖標替換它們。我希望圖標具有複選框的功能。取代與圖像，圖標或背景的複選框，並保持功能

而不是一個圖標我現在只是使用背景。當我點擊背景時，我希望表單改變顏色（通過選擇複選框）。當我再次點擊時，表單應該返回到正常的顏色。

在我的真實形式複選框應用過濾器，所以我需要複選框的功能。

無法真正得到它的任何工作。

.form-item-edit-how-40 { 
 
    display: inline-block; 
 
    padding: 20px; 
 
    width: 50px; 
 
    height: 50px; 
 
    background: yellow; 
 
} 
 
.form-item-edit-how-40:active, 
 
.form-item-edit-how-40:hover { 
 
    background: red; 
 
} 
 
input:checked { 
 
    background: green; 
 
} 
 
input, 
 
label { 
 
    //display: none; 
 
    //visibility: hidden; 
 

 
} 
 
label { 
 
    background: grey; 
 
    width: 50px; 
 
    height: 50px; 
 
}

<div class="form-item-edit-how-40"> 
 
    <input type="checkbox" name="how[]" id="edit-how-40" value="40" data-placeholder="KIES JE TRANSPORT" placeholder="KIES JE TRANSPORT"> 
 
    <label class="option" for="edit-how-40">Met de bus</label> 
 
</div>

來源

2016-11-25 Pascal Claes

爲了得到你之後的結果，你需要改變你的HTML中一點點。您不能選擇CSS中的父母（還）。因此你應該使用「下一個兄弟選擇器」（+）。我已將label中的文字置入span中。使用以下選擇器檢查input[type="checkbox"]時，label將更改背景顏色：input:checked + label{}。

.form-item-edit-how-40 { 
 
    display: inline-block; 
 
    padding: 20px; 
 
    background: yellow; 
 
} 
 
.form-item-edit-how-40:active, 
 
.form-item-edit-how-40:hover { 
 
    background: red; 
 
} 
 

 
input, 
 
label span{ 
 
    display: none; 
 
    visibility: hidden; 
 
} 
 
label { 
 
    display: block; 
 
    background: grey; 
 
    width: 50px; 
 
    height: 50px; 
 
} 
 
input:checked + label{ 
 
    background: green; 
 
}

<div class="form-item-edit-how-40"> 
 
    <input type="checkbox" name="how[]" id="edit-how-40" value="40" data-placeholder="KIES JE TRANSPORT" placeholder="KIES JE TRANSPORT"> 
 
    <label class="option" for="edit-how-40"> 
 
    <span>Met de bus</span> 
 
    </label> 
 
</div>

來源

2016-11-25 11:23:36 LuudJacobs

不得不做出一些額外的變化，但得到它的工作，THX！ https://jsfiddle.net/99urq40n/1/ –

有一個在CSS.無父選擇看到類似Questions

更改HTML代碼。看着這樣的。

現場演示Here

摘錄例

.form-item-edit-how-40 { 
 
    display: inline-block; 
 
    padding: 20px; 
 
    width: 50px; 
 
    height: 50px; 
 
    background: yellow; 
 
} 
 
.form-item-edit-how-40:hover { 
 
    background: red; 
 
} 
 
input[type="checkbox"]:checked + .form-item-edit-how-40 { 
 
    background: green; 
 
} 
 
input, 
 
label { 
 
    //display: none; 
 
    //visibility: hidden; 
 

 
} 
 
label { 
 
    background: grey; 
 
    width: 50px; 
 
    height: 50px; 
 
} 
 
c

<input type="checkbox" name="how[]" id="edit-how-40" value="40" data-placeholder="KIES JE TRANSPORT" placeholder="KIES JE TRANSPORT" class="test"> 
 
<div class="form-item-edit-how-40"> 
 
    <label class="option" for="edit-how-40">Met de bus</label> 
 
</div>

來源

2016-11-25 11:17:16

我用一個標籤，讓你需要的，當然什麼現在你不能在CSS獲取父和改變的背景。問候和成功的編碼

.form-item-edit-how-40 { 
 
    display: inline-block; 
 
    padding: 20px; 
 
    width: 50px; 
 
    height: 50px; 
 
    /* background: yellow; */ 
 
    position:relative; 
 
    
 
} 
 

 
.form-item-edit-how-40:active, 
 
.form-item-edit-how-40:hover { 
 
    /* background: red; */ 
 
} 
 
    
 
input, 
 
label { 
 
    /*display: none; 
 
    visibility: hidden; */ 
 
} 
 

 
input[type="checkbox"] { 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
    appearance:   none; 
 
    position:absolute; 
 
    left:0px; 
 
    top:0px; 
 
    width:100%; 
 
    height:100%; 
 
    z-index:-1; 
 
    outline:none; 
 
    background: yellow; 
 
    margin: 0; 
 
} 
 
    
 
input:checked { 
 
    background: green; 
 
} 
 
input:checked ~ label .fa:before { 
 
    content: "\f111"; 
 
} 
 

 
label { 
 
/*  background: #808080; */ 
 
    position: absolute; 
 
    top: 50%; 
 
    margin-top: -13px; 
 
    left: 50%; 
 
    margin-left: -13px; 
 
    padding: 3px 6px; 
 
    cursor:pointer; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<div class="form-item-edit-how-40"> 
 

 
    <input type="checkbox" name="how[]" id="edit-how-40" value="40" data-placeholder="KIES JE TRANSPORT" placeholder="KIES JE TRANSPORT"> 
 
    <label class="option" for="edit-how-40"><i class="fa fa-circle-o" aria-hidden="true"></i></label> 
 
    
 
</div>

來源

2016-11-25 12:22:38 jseezo

取代與圖像，圖標或背景的複選框，並保持功能

回答

相關問題