give css to checkbox - html

Question

I am new to CSS.
I want to give CSS to checkbox just shown in the image.
i have tried but checkbox is appearing on the screen and when I select one of the category then it background would be yellow.
Thank You.
.radio_toggle {
float:left;
}
.radio_toggle label {
float:left;
width:100px;
overflow:auto;
}
.radio_toggle label span {
text-align:center;
font-size: 15px;
padding:5px 0px;
display:block;
}
.radio_toggle label input {
position:absolute;
}
.radio_toggle .venue {
background-color:#edf1f2;
color: #58666e;
min-height: 100% !important;
border: thin #ced9db solid;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
<div class="categories">
<div class="radio_toggle">
<label class="venue" style="">
<input type="checkbox" name="toggle">
<span>Category</span>
</label>
</div>
</div>
<div class="categories">
<div class="radio_toggle">
<label class="venue" style="">
<input type="checkbox" name="toggle">
<span>Category</span>
</label>
</div>
</div>
<div class="categories">
<div class="radio_toggle">
<label class="venue" style="">
<input type="checkbox" name="toggle">
<span>Category</span>
</label>
</div>
</div>

Answer 1

To hide the input, give it display: none;, updated CSS rule
.radio_toggle label input {
display: none;
}
To give the button a color use the :checked selector, added CSS rule
.radio_toggle label input:checked + span {
color: white;
background: gold;
}
Sample
.radio_toggle {
float:left;
}
.radio_toggle label {
float:left;
width:100px;
overflow:auto;
}
.radio_toggle label span {
text-align:center;
font-size: 15px;
padding:5px 0px;
display:block;
}
.radio_toggle .venue {
background-color:#edf1f2;
color: #58666e;
min-height: 100% !important;
border: thin #ced9db solid;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.radio_toggle label input {
display: none;
}
.radio_toggle label input:checked + span {
color: white;
background: gold;
}
<div class="categories">
<div class="radio_toggle">
<label class="venue" style="">
<input type="checkbox" name="toggle">
<span>Category</span>
</label>
</div>
</div>
<div class="categories">
<div class="radio_toggle">
<label class="venue" style="">
<input type="checkbox" name="toggle">
<span>Category</span>
</label>
</div>
</div>
<div class="categories">
<div class="radio_toggle">
<label class="venue" style="">
<input type="checkbox" name="toggle">
<span>Category</span>
</label>
</div>
</div>

Answer 2

As pointed by #UnknownDeveloper, you have to use javascript for that.
Make a new class .venue_selected and give your desired colors. Then use click event for all elements to add class to label and check respective checkbox.
<style type="text/css">
.radio_toggle {
float:left;
}
.radio_toggle label {
float:left;
width:100px;
overflow:auto;
}
.radio_toggle label span {
text-align:center;
font-size: 15px;
padding:5px 0px;
display:block;
}
.radio_toggle label input {
position:absolute;
}
.radio_toggle .venue {
background-color:#edf1f2;
color: #58666e;
/*min-height: 100% !important;*/
border: thin #ced9db solid;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
cursor: pointer;
}
.radio_toggle .venue_selected{
background: #f9d342 !important;
color: #ffffff !important;
}
.categories input[type="checkbox"] {
display: none;
}
</style>
<div class="categories">
<div class="radio_toggle">
<label class="venue" style=""><input type="checkbox" name="toggle"><span>Category</span></label>
</div>
</div>
<div class="categories">
<div class="radio_toggle">
<label class="venue" style=""><input type="checkbox" name="toggle"><span>Category</span></label>
</div>
</div>
<div class="categories">
<div class="radio_toggle">
<label class="venue" style=""><input type="checkbox" name="toggle"><span>Category</span></label>
</div>
</div>
<script type="text/javascript">
var elms = document.querySelectorAll("label.venue");
elms.forEach(function(el,i) {
el.onclick = function() {
console.log(el);
el.classList.toggle("venue_selected");
el.querySelector("input[type='checkbox']").click();
}
});
</script>

Answer 3

You can accomplish this using 2 methods.
Either using JavaScript or CSS.
For CSS it's very simple. You have to use the :checked attribute.
.radio_toggle[type=checkbox] + label {
// Code on how to look before checked
}
input[type=checkbox]:checked + label {
// Code on how to look after checked
}
For JS you first have to get the radio_toggle element using and then listen for if it's checked which for your case will look something like this
var element = document.getElementsByClassName("radio_toggle").checked = true;
function check(element) {
element.checked = true;
element.style.color = "Color you desire"
}