Carousel slider gets dotted border

[jeroen]

A minor annoyance in the carousel plugin:

After clicking on one of the side bars, it gets a dotted border in firefox and IE. Probably missing an event.preventDefault() somewhere. http://www.youtube.com/watch?v=vNHu8-1vOGM

[cvrebert]

This is most likely the browser's own focus styling.

[jeroen]

Yes, perhaps a $(this).blur() in the click event handler will do.

[mycueb]

a:focus {outline:thin dotted #333;} is applied. Fix: Just add {outline:none !important} to the already defined .carousel-control:focus

[rahularady]

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <!-- Begin Slide 1 -->
    <div class="item active">
      <img src="images/slide1.jpg" alt="">
      <div class="carousel-caption">
        <h3 class="carousel-title hidden-sm"></h3>
        <p class="carousel-body"></p>
      </div>
    </div>

Guys please help solve the slider dotted issue

[Heydon]

This should be reopened.

It's understandable to find the dotted outline ugly, but it does serve a purpose: It indicates to keyboard users -- navigating by TAB key -- which item is currently available to be pressed. Without a :focus indicator, their UX is screwed.

Using the blur() function to unfocus the control is not a good idea, since the control should be "in hand" for keyboard users in this situation.

If you are unhappy with the outline focus style, I recommend replacing it with something else

:focus {
/* anything you would be happy to see with :hover */
}

[sturobson]

+1'ing @Heydon here. I'm sure just doing

:hover,
:focus {
/* anything you would be happy to see with :hover */
}
would suffice on most things.

If it doesn't work, create something else. I suggest -

a) put what you've pulled out back in so designers/developers make it work for their designs
b) add the :focus where you've got :hover

stripping it out because of 'the look' of it smarts of developer laziness.

[patrickhlauke]

ok, looking at the current state of the carousel http://getbootstrap.com/javascript/#carousel it does seem that there IS a visual indication of focus (minus the outline). we can now argue about whether that indication is STRONG enough or not, but at least it's not a complete removal. rather than reopening this bug, i'd suggest - if you feel strongly about it - submitting an alternative stronger styling as a discrete improvement patch / pull request