2

I'm creating carousel with ngb-Bootstrap and i have problem with border. When i click on carousel buttons or everywhere in carousel i have sth like this:

enter image description here

I don't want to display this border outside. I was trying to remove border on active or on focus but nothing works.

.imageCarousel {
        max-height: 500px;
        text-align: center;
        color: $color2;

        user-select: none;


        img {
            max-width: 80%;
            max-height: 280px;

        }
        .carousel-indicators {
            color: $color2;
        }
    }
  • 1
    Try adding `outline: none;` to the buttons. [Source](https://stackoverflow.com/questions/2943548/how-to-reset-remove-chromes-input-highlighting-focus-border) – Ryne Mar 22 '18 at 15:35
  • 1
    `outline: none` – Cristophs0n Mar 22 '18 at 15:35
  • Don't use an element which is focusable if you don't want a focus state. This is assuming you don't want users to be able to interact with your slider at all… – Seth Warburton Mar 23 '18 at 09:48

1 Answers1

3
*:focus {
    outline: none;
}

Or you can be more specific with a CSS class (like .imageCarousel).

Roland Rácz
  • 2,879
  • 3
  • 18
  • 44
  • Bad advice. Disabling outlines on elements that should have an outline is big f**k-you to your users. Accessibility, it's a thing. Why not use an element that doesn't have a focus state? – Seth Warburton Mar 23 '18 at 09:46
  • 1
    @SethWarburton To show nothing on focus, that's a bad idea, that's true. (If the developer writes custom CSS for `:focus`, it's okay.) But this was the answer for the question. – Roland Rácz Mar 23 '18 at 11:31
  • 1
    Your use of the universal selector destroys focus states on every element; bringing a gun to a knife fight. Yes, it did solve the OP's problem but not in a particularly responsible way. – Seth Warburton Mar 23 '18 at 14:26