如何使用 JavaScript for Google Chrome 更改复选框的边框颜色?

Question

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

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

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

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

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

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;
}