javascript - 如何使用适用于 Google Chrome 的 JavaScript 更改复选框的边框颜色？

Question

我正在尝试重现这种边框效果

document.getElementById("e1").style.border='2px solid blue';

<input type="text" id="e1">

用于复选框和单选按钮。我读过与此类似的帖子，但似乎都没有提供有效的解决方案。我在 Java 应用程序中使用 JavascriptExecutor 对象，因此目标是将代码保留为 JavaScript。我读过一个很好的方法是用 div 包装复选框，但我的 JavaScript 不够强大，无法做到这一点。

最终，我试图在用 Selenium 更改元素后突出显示该元素，因此即使将标签设为粗体也足够了。任何帮助将不胜感激。

Answer 1

您可以创建一个带边框的 span 元素并用它替换您的复选框元素。之后，将复选框附加回 span 元素。

const e1 = document.getElementById('e1');
const wrapper = document.createElement('span');
wrapper.style.border = '2px solid blue';

e1.replaceWith(wrapper);
wrapper.append(e1);

<input type="checkbox" id="e1">

或者更短的解决方案是使用 CSS(大纲)

const e1 = document.getElementById('e1');
e1.style.outline = '2px solid blue';

<input type="checkbox" id="e1" >

如果你只能使用CSS

#e1 {
 outline: 2px solid blue;
}