How can I remove the dark line around my menu button?-CodePudding

I am creating a C# Razor project using Bootstrap 5.1.3 and a custom menu button.

Basically, I am using a custom button with an icon to open an offcanvas menu and when this menu is closed a horrid line around the button is visible. A click away (lost focus) and the button appears as should be.

An example is as follows:

.navbar-toggler {
  border-color: red;
}

.navbar-toggler:hover,
.navbar-toggler:active {
  border-color: green;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg xml,<?xml version='1.0' encoding='UTF-8'?>");
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<header>
  <nav >
    <div >
      <a  asp-page="/Index">Test</a>
      <button  type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
        <span ></span>
      </button>
      <div  tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
        <div >
          <h5  id="offcanvasNavbarLabel">Test Text</h5>
          <button type="button"  data-bs-dismiss="offcanvas" aria-label="Close">X</button>
        </div>
        <div >
          <ul >
            <li >
              <a  asp-area="" asp-page="./Contact" title="Contact Us">Conatct Us</a>
            </li>
            <li >
              <a  asp-area="" asp-page="./Privacy" title="Privacy">Privacy</a>
            </li>
            <li >
              <a  href="#" id="offcanvasNavbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                Something
              </a>
              <ul  aria-labelledby="offcanvasNavbarDropdown">
                <li><a  asp-page="./One" title="One">One</a></li>
                <li><a  asp-page="./Two" title="Two">Two</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </nav>
</header>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

CodePudding user response：

Bootstrap puts a shadow on the button when it has focus. You could remove it with some CSS.

However, that's presumably there as an accessibility feature and probably shouldn't be removed. See Accessibility: Never Remove the Outlines

.navbar-toggler {
  border-color: red;
}

.navbar-toggler:hover,
.navbar-toggler:active,
.navbar-toggler:focus {
  border-color: green;
  box-shadow: none !important; /* -----------HERE */
}

.navbar-toggler-icon {
  background-image: url("data:image/svg xml,<?xml version='1.0' encoding='UTF-8'?>");
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<header>
  <nav >
    <div >
      <a  asp-page="/Index">Test</a>
      <button  type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
        <span ></span>
      </button>
      <div  tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
        <div >
          <h5  id="offcanvasNavbarLabel">Test Text</h5>
          <button type="button"  data-bs-dismiss="offcanvas" aria-label="Close">X</button>
        </div>
        <div >
          <ul >
            <li >
              <a  asp-area="" asp-page="./Contact" title="Contact Us">Conatct Us</a>
            </li>
            <li >
              <a  asp-area="" asp-page="./Privacy" title="Privacy">Privacy</a>
            </li>
            <li >
              <a  href="#" id="offcanvasNavbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                Something
              </a>
              <ul  aria-labelledby="offcanvasNavbarDropdown">
                <li><a  asp-page="./One" title="One">One</a></li>
                <li><a  asp-page="./Two" title="Two">Two</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </nav>
</header>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>