HTML 复选框样式答案

【问题标题】：HTML Checkbox StyleHTML 复选框样式
【发布时间】：2019-08-01 19:39:16
【问题描述】：

我有一个关于样式复选框的快速问题。我制作了一个带有复选框的大表，并希望该表中的每个复选框在选中时都有自己的颜色，更好的是每行都有自己的选中颜色。我找到了一种方法来一次检查它们

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

但我不知道如何使用它，所以我为每一行或每一行着色。提前感谢您的帮助！

【问题讨论】：

给每个输入一个类并以这种方式定位它？例如<input class="checkbox-blue"> ?
如果您希望它随机设置颜色并且内容是动态的，那么您可能需要使用 JavaScript

标签： html css

【解决方案1】：

最简单的方法是给你在<table>中使用的<tr>一个单独的class，然后为每个<tr>中的checkboxes赋予不同的颜色如下；

.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 才能更改background-color 和另一个question。

【讨论】：

为什么要使用 id 而不是类？或者如果颜色的顺序总是相同的nth-child？ ID 具有不必要的高特异性，并且应该是唯一的，这会阻止您重复使用它们。
@Kocik 我编辑了我的答案。我以为你没有。表中的行数是恒定的，您不能两次使用相同的颜色。这就是我使用 ids 的原因。

【解决方案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 动态更改该逻辑。

【讨论】：

【解决方案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);
  }

【讨论】：