How do i make my checkboxes transparant? It does work with text fields and buttons but it doesnt seem to work with checkboxes. This is the form of my code.
#checkbox { width: 20px; height: 20px; cursor: pointer; vertical-align: bottom; color: black; background-color: rgba(0, 0, 0, 0.08); }<div class="checkbox check-transparent"> <label> <input type="checkbox" id="checkbox">Onthoud mij </label> </div>2 Answers
The only thing that can be done for a regular checkbox is making it transparent by decreasing its opacity but it also lightens the tick mark inside if checked. A workaround is, having the checkbox wrapped in a div and changing the color of the checkbox when checked like shown in the snippet below:
#checkb { width: 20px; height: 20px; cursor: pointer; background: rgba(40,40,40,0.2); color:black; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; position: relative; left: -5px; top: -5px; } #checkb:checked { background: rgba(40,40,40,0.7); } .checkbox-container { position: absolute; display: inline-block; margin: 20px; width: 100px; height: 100px; overflow: hidden; }<div class="checkbox-container"> <input type="checkbox" id="checkb"/> Input </div>You can also (classic method that allows to restyle a checkbox crossbrowser following standards)
take
inputahead and outside thelabellink the
labelto its input via attributeforuse a pseudo on
labelto draw a checkbox via css and also apply size and background.hide the checkbox
label { display: inline-block; } #checkbox { display: none; } label:before { content: ''; cursor: pointer; vertical-align: bottom; color: black; background-color: rgba(0, 0, 0, 0.1); /* average checkbox styling */ line-height: 1.1em; font-weight: bold; text-align: center; font-size: 20px; height: 20px; width: 20px; display: inline-block; box-shadow: inset 0 0 1px 1px rgb(153, 154, 154), inset 0 0 1px 2px white, inset 0 0 1px 2px white, inset 2px 2px 1px 1px rgb(182, 187, 192), inset -1px -1px 2px 1px rgb(182, 187, 192), inset 8px 8px 4px -4px rgb(182, 187, 192); box-sizing: border-box; } :checked+label:before { content: '\2713'; color: rgb(74, 95, 151); } :checked+label { color: rgb(74, 95, 151); } label:hover { color: rgb(28, 50, 125); } label:hover:before { box-shadow: inset 0 0 1px 1px rgb(95, 133, 156), inset 0 0 1px 2px rgb(198, 237, 252), inset 0 0 1px 2px rgb(198, 237, 252), inset 2px 2px 1px 1px rgb(134, 203, 246), inset -1px -1px 2px 1px rgb(134, 203, 246), inset 8px 8px 4px -4px rgb(134, 203, 246); }<div class="checkbox check-transparent"> <input type="checkbox" id="checkbox"> <label for="checkbox"> Onthoud mij </label> </div>ncG1vNJzZmirpJawrLvVnqmfpJ%2Bse6S7zGiorp2jqbawutJoa3BsZGmBcYSOoaawZaSkeq6typ5kprFdmLWmr8qbprGdo2LBs63NrKeaqpWjwQ%3D%3D