如何在需要时突出显示替换隐藏复选框输入的复选框伪元素

Question

我有一个复选框伪元素，它替换了隐藏的复选框输入，我想在需要隐藏复选框时突出显示它。有没有 css 解决方案？解决问题的正确方法是什么？https://jsfiddle.net/ht2c9sbd/3/

<form>
  <div class="group-input">
    <input type="checkbox" id="c_1" required hidden="">
    <label for="c_1">I agree with everything.</label>
  </div>
  <input type="submit" value="submit" id="submit">
</form>

.css：

input[type="checkbox"] + label::before {
    content: "";
    display: inline-block;
    height: 30px;
    width: 30px;
    margin: 0 14px 0 0;
    cursor: pointer;
    vertical-align: middle;
    position: absolute;
    left: 0;
    top: calc(50% - 15px);
    -webkit-transition: background-color 0.25s ease, border-color 0.25s ease;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}
input[type="checkbox"] + label::before {
    content: "";
    display: inline-block;
    height: 30px;
    width: 30px;
    border: 1px solid rgba(20, 61, 139, 0.2);
    margin: 0 14px 0 0;
    cursor: pointer;
    vertical-align: middle;
    position: relative;
    top: -2px;
}
input[type="checkbox"]:checked + label::before {
    background-image: url(https://image.flaticon.com/icons/png/512/447/447147.png);
    background-size: 15px;
    border: 1px solid rgba(20, 61, 139, 0);
    background-color: rgba(20, 61, 139, 0.2);
    background-position: center;
    background-repeat: no-repeat;
}

这是我可怕的JS解决方案：

function checkCheckbox(e) {
    if (!e.checked) {
        $('head').append('<style id="invalidCheckbox">input[type="checkbox"] + label::before {border: 1px solid #ff3535; box-shadow: 0 0 2px #ff3535;}</style>');
        return false;
    } else {
        let temp = $('head style:last');
        while(temp && temp[0].id === "invalidCheckbox"){
            temp.remove();
            temp = $('head style:last');
        }
        return true;
    }
}
const mycheckbox = document.getElementById('c_1');
document.getElementById("submit").addEventListener('click', function(e){
  e.preventDefault();
  checkCheckbox(mycheckbox); 
});

Answer 1

脚本：

const mycheckbox = document.getElementById('c_1');
document.getElementById("submit").addEventListener('click', function(e){
    e.preventDefault();
    if ( mycheckbox.hasAttribute('required') && !mycheckbox.checked ){
    mycheckbox.className = "invalid-input"; // <-- add new class
  } else {
    mycheckbox.className = "";
  }
});

样式

（您可以根据需要更改样式）：

input[type="checkbox"].invalid-input + label::before{
  background-color: red;
}

尝试更新现有的 DOM 元素，而不是在 DOM 中创建新元素，因为 DOM 操作很慢。

当对元素外观所做的更改明显更改但不影响其布局时，将发生重绘。

创建新的 DOM 元素对性能更为重要，因为它涉及影响页面部分布局的更改

Answer 2

要突出显示required复选框：

在 CSS 中：

/* Style (any) element with the required attribute: */
:required {
  background: red;
}
/* Style input elements with the required attribute: */
input:required {
  box-shadow: 1px 1px 10px rgba(200, 0, 0, 0.5);
}
/* Style focused and required element: */
input:required:focus {
  border: 2px solid red;
  outline: none;
}
/* Style hover and required element: */
input:required:hover {
  opacity: 1;
}

在 JS 中：

// Get the element
var req = document.getElementById("my_checkbox").required;
// Check if required
if(req.hasAttribute('required')) {
    // Style it
    req.style.background = "red";
}