How to add CSS styles to checkbox on selection?

Question

I want to make HTML checkboxes have a certain set of CSS styling only when it's been selected. E.g. change colour or change text weight, etc. I am confused about whether I should use a function or if there is an existing method that I could use.

I have gone through these questions:

You haven't described a problem you're facing other than lack of beauty. Please revise to make it more clear what isn't working as expected. — isherwood, Oct 18 '19 at 18:48
Related, possibly a dupe https://stackoverflow.com/questions/13630229/can-i-have-an-onclick-effect-in-css (I'm out of CVs atm anyway) — TylerH, Oct 18 '19 at 19:00
I m not asking you to debug some code @BLAKE ,what I m asking is a way to code — karthiksehghal, Oct 18 '19 at 19:02

score 3 · Accepted Answer · answered Oct 18 '19 at 18:54

3

You don't need any function for this, you can do this with good understanding of css selectors

You can try:

input[type="checkbox"]:checked+span {
    text-decoration: line-through;
    color:red;
}

and define your text box like

<input type="checkbox" ><span>Some text label for checkbox</span>

Here is an example

answered Oct 18 '19 at 18:54

bali

327
1
5
14

1

yes but this is not the proper way to ask a question you better first give it a try as @DanStarns said – bali Oct 18 '19 at 19:16
1

and then search for what problem you faced, there are lots of answer to this question, as one mentioned by @TylerH above – bali Oct 18 '19 at 19:16
yeah I understand but as I said I am new to stack overflow, I wouldn't repeat it again – karthiksehghal Oct 18 '19 at 19:22

score 1 · Answer 2 · answered Oct 18 '19 at 18:54

1

You can control the styling of checkboxes or other inputs based on their current state through CSS selectors like this:

input[type='checkbox'] {background-color:red;}

input[type='checkbox']:checked {background-color:blue;}

answered Oct 18 '19 at 18:54

disc_code22

109
3

score 0 · Answer 3 · answered Oct 18 '19 at 18:55

In JavaScript, use a function that you would call the onclick method on.

Example:

<div>
<p id ="color" onclick="changeFunction()">This text can change colors</p>
<button id="changeColor" onclick="changeFunction()"> Click Me</button>
</div>
<script>
function changeFunction(){
var words = document.getElementById('color');
words.style.color = 'red';
}
</script>

Here's a working Jsfiddle to show you this example: https://jsfiddle.net/z4gr8wn5/

This should give you a base idea of how you should go forward with figuring out what you need to find out.

score 0 · Answer 4 · answered Oct 18 '19 at 18:58

0

If you are looking on how to change a checkbox style when the user clicks then this will help you out https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_custom_checkbox

answered Oct 18 '19 at 18:58

Benjamin Gil

127
1
12

score 0 · Answer 5 · answered Oct 18 '19 at 19:01

Making use of the :checked css pseudo-class you will be able to change the element style without using Javascript.

You can read more about it here.

/* Change color */
input[type="checkbox"]:checked {
  box-shadow: 0 0 0 3px red;
}

/* Change label color */
input:checked+label {
  color: blue;
}

<input type="checkbox" name="my-checkbox" id="example">
<label for="example">Check me!</label>

score 0 · Answer 6 · answered Oct 18 '19 at 19:43

It might be that you want to toggle a class, and here is a example if that is the case.

<style>
  .mystyle {
    font-size: 25px;
  }
</style>
<div onClick='this.classList.toggle("mystyle");'>
  example1
</div>

or maybe add a class to an object you clicked.

<style>
  .mystyle {
    font-size: 25px;
  }
</style>
<div onClick='this.classList.add("mystyle");'>
  example2
</div>

or, if you really want to be in control you can send the clicked object to a function and manipulate it there, in any way you like.

<div onClick='myFn(this);'>
  example3
</div>
<script>
    function myFn(that) {
        that.style.color = "blue";
        that.innerHTML = 'You clicked me!';
    }
</script>

How to add CSS styles to checkbox on selection?

6 Answers6