Стиль флажка HTML
У меня есть быстрый вопрос о стилях флажков. Я сделал одну большую таблицу с флажками и хотел бы, чтобы каждый флажок в этой таблице имел свой собственный цвет при проверке, даже лучше, чтобы каждая строка имела свой собственный отмеченный цвет. Я нашел способ проверить их все сразу с помощью этого
input[type = "checkbox"]:checked{
background-color: #fff;
}
Но я не знаю, как это использовать, поэтому я раскрашиваю каждую строку по-разному или каждую. Заранее спасибо за вашу помощь!
Если вы хотите, чтобы цвет устанавливался случайным образом, а содержимое было динамическим, вам может потребоваться использовать 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);
}
Вам нужно определиться с алгоритмом, как вы хотите различать строки, и добавить соответствующий селектор.
Например, для окрашивания каждой второй строки по-разному:
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;
}
Вы можете узнать больше о nth-child на МДН.
Альтернативой является использование классов для таргетинга на определенные строки:
.row-highlighted input[type = "checkbox"]:checked {
background-color: orange;
}
Затем вы можете применять и удалять классы из строк, чтобы изменить их цвета. Вы можете иметь эту логику в своем механизме шаблонов или динамически изменять ее с помощью JavaScript.
Способ простейший сделать это — выделить отдельный class для <tr>, который вы используете в своем <table>, а затем присвоить checkboxes разные цвета в каждом <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 требуется больше background-color, и это еще один вопрос.
Почему вы используете идентификаторы вместо классов? Или если порядок цветов всегда одинаков nth-child? Идентификаторы имеют излишне высокую специфичность и должны быть уникальными, что препятствует их повторному использованию.
@Kocik, я отредактировал свой ответ. Я думал, что твой нет. количество строк в таблице постоянно, и вы не можете использовать один и тот же цвет дважды. Вот почему я использовал идентификаторы.
Дайте класс каждому входу и настройте его таким образом? Например
<input class = "checkbox-blue">?