Как в кнопках bootstrap убрать/уменьшить рамку при нажатии?

Question

[Freerade]

<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
    <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
    <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>

    <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
    <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>

    <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
    <label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
</div>

Вот эта рамка при клике вокруг элемента не нужна, как ее убрать у элемента? Само заполнение цветом при этом должно остаться.

Answer 1

[Сергей delphinpro]

https://github.com/twbs/bootstrap/blob/main/scss/_...

А если уберёте, то как вы будете отличать отличать состояние "в фокусе"? Это затруднит навигацию по странице с помощью клавиатуры.

Comments

[Freerade]

Где поменять это можно, если у меня просто подключение к css файлу в href стоит?

[Сергей delphinpro]

Freerade, там где я показал.
Скачали, изменили, пересобрали и подключайте новый полученный css-файл.

Answer 2

[black1277]

измените свойство
outline: none;
Если bootstrap 5-й версии - можно добавить кнопкам класс shadow-none

<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
  <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
  <label class="btn btn-outline-primary shadow-none" for="btnradio1">Radio 1</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
  <label class="btn btn-outline-primary shadow-none" for="btnradio2">Radio 2</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
  <label class="btn btn-outline-primary shadow-none" for="btnradio3">Radio 3</label>
</div>