html {
    font-family: sans-serif;
}

.rule {
    border: solid silver 1px; padding: 4px; border-radius: 4px;
    margin: 2px;
}

.properties {
    margin: 2px 0;
}

.properties label tt {
    padding: 2px;
    border-radius: 2px;
    cursor: pointer;
    margin: 0 2px;
}

.properties label input {
    display: none;
}

.properties label input:checked + tt {
    background-color: dodgerblue;
    color: white;
}

input.rule:not(:checked)  + div {
    color: gray;
}

input.rule:not(:checked) + div .properties label input:checked + tt {
    color: gray;
    background-color: silver !important;
}