Question

我有一个关于样式复选框的快速问题。我制作了一个带有复选框的大表，希望该表中的每个复选框在选中时具有自己的颜色，甚至更好的是，每行都具有自己的选中颜色。我已经找到了一种使用

一次检查所有对象的方法

SELECT x.date_period, count(x.vid) contacts FROM
(
SELECT c.firstname as owner, c.vid, to_char(c.properties__createdate__value::date, 'IYYYIW') as date_period
FROM "hmy"."contacts" as c
) x
group by x.date_period

但是我不知道该如何使用，所以我给每一行或每一行上色。预先感谢您的帮助！

Answer 1

最简单的方法是将class中使用的<tr>分别赋予<table>，然后为{{每个checkboxes中的1}}如下；

<tr>

.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>代替了outline，因为需要更多background-color来更改css及其另一个question

Answer 2

您需要确定算法，如何区分行并添加适当的选择器。

例如，为其他每行不同地着色：

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

具有不同颜色的特定行：

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

您可以在MDN上进一步了解nth-child。

替代方法是使用类来定位特定行：

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

然后，您可以应用和删除行中的类以更改其颜色。您可以在模板引擎中使用该逻辑，也可以使用JavaScript进行动态更改。

Answer 3

您可能需要使用JavaScript并在页面加载时调用该函数：

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复选框样式

3 个答案: