Скрытие флажка с CSS

Question

Я новичок в html и css, и я работаю над проектом, где я хочу использовать пользовательские флажки. Я пытаюсь скрыть флажок с изображением через css. Я не хочу переписывать html, если мне это не нужно. Ive получил мое изображение, чтобы покрыть флажок, используя (display: none;), но это также отключил мой флажок. Есть ли способ сделать мой флажок без использования?

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

Answer 1

Вы можете установить непрозрачность флажка на 0. Это все еще делает его доступным для кликов.

Пример (нажмите внутри черного прямоугольника):

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

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

Answer 2

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. к вашим элементам (изображения или что-то другое).

Answer 3

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>