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!
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.
nth-child? Ids have unnecessarily high specificity and should be unique which blocks you from reusing them.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.
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);
}
<input class="checkbox-blue">?