HTML Checkbox Style

Question

I have a quick question about styling checkboxes. I have made one big table with checkboxes in it and would like to have each checkbox in that table to have its own color when checked, even better each row to have its own checked color. I have found a way to check them all at once with this

input[type="checkbox"]:checked{
        background-color: #fff;
    }

But I don't know how to use that so I color each row different or each one. Thanks in advance for your help!

Give a class to each input and target it that way ? For example `` ? — Jake, Mar 11 '19 at 13:23
If you want it to randomly set the color and the content is dynamic then you might need to use JavaScript — Rami Zebian, Mar 11 '19 at 13:26

Zeeshan Ahmad Khalil · Answer 1 · 2019-03-11T16:57:24.723

The simplest way to do this is giving a separate class to <tr> you are using in your <table> and then giving different colors to the checkboxes in each <tr> as follows;

.row1 input[type="checkbox"]:checked{
    outline:2px solid red;
    outline-offset: -2px;
}
.row2 input[type="checkbox"]:checked{
    outline:2px solid green;
    outline-offset: -2px;
}
.row3 input[type="checkbox"]:checked{
    outline:2px solid blue;
    outline-offset: -2px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="check_boxes_colour.css">
</head>
<body>
    <table border="">
        <tr class="row1">
            <td> <input type="checkbox"> </td>
            <td> <input type="checkbox"> </td>
            <td> <input type="checkbox"> </td>
        </tr>
        <tr class="row2">
            <td> <input type="checkbox"> </td>
            <td> <input type="checkbox"> </td>
            <td> <input type="checkbox"> </td>
        </tr>
        <tr class="row3">
            <td> <input type="checkbox"> </td>
            <td> <input type="checkbox"> </td>
            <td> <input type="checkbox"> </td>
        </tr>
        <tr class="row1">
            <td> <input type="checkbox"> </td>
            <td> <input type="checkbox"> </td>
            <td> <input type="checkbox"> </td>
        </tr>
    </table>
</body>
</html>

Note: I used outline instead of background-color as more css is required to change background-color and its another question.

Why would you use ids instead of classes? Or if the order of colors is always the same `nth-child`? Ids have unnecessarily high specificity and should be unique which blocks you from reusing them. — Kocik, Mar 11 '19 at 14:44
@Kocik i edited my answer. I thought that your no. of rows in table is constant and you can't use same color twice. That why i used ids. — Zeeshan Ahmad Khalil, Mar 11 '19 at 15:08

score 1 · Accepted Answer · answered Mar 11 '19 at 13:32

You need to decide on the algorithm how you want to differentiate the rows and add appropriate selector.

For example for coloring every other row differently:

tr:nth-child(even) input[type="checkbox"]:checked {
 background-color: red;
}
tr:nth-child(odd) input[type="checkbox"]:checked {
 background-color: blue;
}

Specific row with different color:

tr:nth-child(7) input[type="checkbox"]:checked {
 background-color: green;
}

You can learn more about nth-child on MDN.

The alternative is to use classes to target specific rows:

.row-highlighted input[type="checkbox"]:checked {
 background-color: orange;
}

Then you can apply and remove classes from rows to change their colors. You can have that logic in your templating engine or change that dynamicly with JavaScript.

score 0 · Answer 3 · answered Mar 11 '19 at 13:28

You might need to use JavaScript and call the function on page load:

function setBgRandomColor() {    
   var
    r = ('0'+(Math.random()*255|0).toString(16)).slice(-2),
    g = ('0'+(Math.random()*255|0).toString(16)).slice(-2),
    b = ('0'+(Math.random()*255|0).toString(16)).slice(-2);
    var randomColor = '#' +r+g+b;
    $('input[type=checkbox]').css('background', randomColor);
  }

HTML Checkbox Style

3 Answers3