隱藏複選框與CSS

我是新來的HTML和CSS，我正在一個項目，我想使用自定義複選框。我想通過css隱藏一個帶有圖像的複選框。我不想重寫html，如果我不必。我已經使用（display：none;）覆蓋了複選框，但是這也禁用了我的複選框。有沒有辦法讓我的複選框可用而不顯示？隱藏複選框與CSS

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

    input[type='checkbox'] + label 
    { 
    background: url('/Pictures/checkbox_unchecked.jpg')no-repeat; 
    height: 30px; 
    width: 30px; 
    background-size: 100%; 
    display:inline-block; 
    padding: 0 0 0 0px; 
    } 

    input[type='checkbox']:checked + label 
    { 
    background: url('Pictures/checkbox_checked.jpg') no-repeat; 
    height: 50px; 
    width: 200px; 
    background-size: 100%; 
    display:inline-block; 
    padding: 0 0 0 0px; 
    }

來源

2016-07-09 Kris

使它透明與不透明'：0' –

您可以將複選框的不透明度設置爲0.這仍然使其可點擊。

實例（點擊黑色矩形內）：

#checkbox { 
 
    opacity: 0; 
 
} 
 
#container { 
 
    border: 2px solid black; 
 
    width: 20px;; 
 
}

<div id="container"> 
 
    <input type="checkbox" id="checkbox" onclick="alert('hello')"/> 
 
</div>

來源

2016-07-09 20:44:02

改變不透明，然後移動複選框偉大的工作。謝謝！ – Kris

我用這個，它工作完美，但我有我的div與溢出：滾動，這將禁用滾動功能。任何想法爲什麼？ – Naomi

@Naomi我不知道爲什麼會發生。這不應以任何方式影響滾動。 –

label input { 
 
    opacity: 0; 
 
    width: 0; 
 
    height: 0; 
 
    overflow: hidden; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
label span.y { 
 
    display: none; 
 
} 
 

 
label span.n { 
 
    display: inline; 
 
} 
 

 
label input:checked ~span.y { 
 
    display: inline; 
 
} 
 

 
label input:checked ~span.n { 
 
    display: none; 
 
}

<label> 
 
    <input type="checkbox" value="1"> 
 
    <span class="y">Checked!</span> 
 
    <span class="n">Click me!</span> 
 
</label>

只要改變span.y和span.n.到元素（圖片或別的東西）。

來源

2016-07-09 20:51:34 doubleui

input[type='checkbox'] { 
 
    display: block; 
 
    height: 0; 
 
    width: 0; 
 
    opacity: 0; 
 
    overflow: hidden; 
 
} 
 
input[type='checkbox'] + label { 
 
    background: url('http://lorempixel.com/30/30/') no-repeat; 
 
    height: 30px; 
 
    width: 30px; 
 
    background-size: cover; 
 
    display: inline-block; 
 
} 
 
input[type='checkbox']:checked + label { 
 
    background: url('http://lorempixel.com/50/200/') no-repeat; 
 
    height: 50px; 
 
    width: 200px; 
 
    background-size: cover; 
 
    display: inline-block; 
 
}

<input type="checkbox" id="check" /> 
 
<label for="check"></label>

來源

2016-07-09 21:24:31

隱藏複選框與CSS

回答

相關問題