Отображения флажка в хроме

Question

У меня есть следующий HTML-код, который я показываю с cefsharp в МОФ приложении:

<label><input type="checkbox" class="form-control"/> Steaksandwich</label> 

Я хотел бы спросить, если это дизайн, что синяя граница, которая появляется, если флажок активен и не растягивается вокруг метки? Это как эффект выглядит в моем хромом:

Если это дизайн, я могу как-то изменить его или удалить эффект? Если это не по дизайну, то что я делаю неправильно?

Answer 1

Обычно мы не используем класс «form-control» в поле «Form-control». Просто удалите его, и все будет в порядке.

Answer 2

Попробуйте использовать for=, чтобы создать связь между этикеткой и входом:

<input id="mybox" type="checkbox" class="form-control"/> 
 
<label for="mybox"> Steaksandwich</label>

Answer 3

Эта строка добавляется в браузере, вы можете удалить его, добавив это на CSS * - означает все элементы на странице. Я надеюсь, что это сработает

*{ 
outline:none; 
}