Как изменить цвет границы флажка с помощью JavaScript для Google Chrome?

Question

Я пытаюсь воспроизвести этот эффект границы

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

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

для флажков и переключателей.Я читал подобные посты к этому, но ни один, кажется, не предлагает решение, которое работает.Я использую объект JavascriptExecutor в приложении Java, поэтому целью является сохранение кода на JavaScript.Я прочитал хороший подход, чтобы обернуть флажок с div, но я не достаточно силен с JavaScript, чтобы сделать это.

В конечном счете, я пытаюсь выделить элемент после того, как я изменил его с помощью Seleniumтак что даже делая Ярлыки полужирными будет достаточно.Любая помощь будет оценена.

Answer 1

Вы можете создать элемент span с рамкой и заменить им элемент checkbox.После этого вы добавляете флажок обратно к элементу 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;
}