Slick.js remove blue highlight around image

Question

I am using Slick.js to build a carousel inside a modal. Everything works perfectly until I click on an image. A blue border shows up and I unfortunately cannot figure out how to make it stop doing so. I've tried outline: none and border: none and have had no success. Here is my code

HTML:

<div id="openModal" class="modalDialog">
    <div id ="background">
        <a href="#close" title="Close" class="close">X</a>
            <div id="logo">
                <img src="/media/{{ gallery.logo }}" alt="Smiley face" height="100" width="150">
            </div>
            <div class="multiple-items">
                        <div><img src="/media/{{ gallery.image1 }}" height="200" width="300"></div>
                        <div><img src="/media/{{ gallery.image2 }}" height="200" width="300"></div>
                        <div><img src="/media/{{ gallery.image3 }}" height="200" width="300"></div>
                        <div><img src="/media/{{ gallery.image4 }}" height="200" width="300"></div>
                        <div><img src="/media/{{ gallery.image5 }}" height="200" width="300"></div>
                        <div><img src="/media/{{ gallery.image6 }}" height="200" width="300"></div>
            </div>
        </div>
</div>

CSS:

/* Slider */
 .slick-slider {
    margin: 110px 35px 0 0;
    position: relative;
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}
.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.slick-list:focus {
    outline: none;
}
.slick-list.dragging {
    cursor: pointer;
    cursor: hand;
}
.slick-slider .slick-track, .slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
}
.slick-track:before, .slick-track:after {
    display: table;
    content:'';
}
.slick-track:after {
    clear: both;
}
.slick-loading .slick-track {
    visibility: hidden;
}
.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide {
    float: right;
}
.slick-slide img {
    display: block;
}
.slick-slide.slick-loading img {
    display: none;
}
.slick-slide.dragging img {
    pointer-events: none;
}
.slick-initialized .slick-slide {
    display: block;
    background-color: green;
    border: none;
}
.slick-loading .slick-slide {
    visibility: hidden;
}
.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}
.slider {
    width: 80%;
    margin: 40px 0 0 100px;
}
.lower {
    margin-top: 100px;
}
.slick-slide {
    color: white;
    padding: 30px;
    font-size: 30px;
    font-family:"Arial";
    margin: 0 -50px 0 0;
}
.slick-prev:before, .slick-next:before {
    color: black;
}
.slick-slide:nth-child(1), .slick-slide:nth-child(3), .slick-slide:nth-child(5), .slick-slide:nth-child(7), .slick-slide:nth-child(9), .slick-slide:nth-child(11) {
}
.slick-slide slick-current slick-active {
    display: none;
    color: red;
}
.slick-slide slick-active {
    display: none;
}
.slick-active img {
    outline: 0 !important;
    border:0 none !important;
}
.multiple-items img {
    outline: 0 !important;
    border:0 none !important;
}

JQuery:

$(document).ready(function(){
    $('.multiple-items').slick({
      infinite: false,
      arrows: false,
      slidesToShow: 3,
      slidesToScroll: 1,

});
  });

EDIT:

Here is a link to the JSFiddle. When you open the modal you will see the images inside. Once you click on an image a blue box appears around the image. That is what I am trying to remove.

Peculiarity

not able to reproduce the problem with your code, can you be more clear about the border where it is appearing, around the image? – Initiatory

@Initiatory I added a JSFiddle that points out my problem. Appreciate any help. – Peculiarity

@Kevin Jantzer solution is correct, you forget to mention in question that blue border only appears in chrome, if i check your fiddle in firefox there is no blue border when selecting image – Initiatory

Answer 1

You need to use outline: none;

Put it on .slick-slide

.slick-slide {
    outline: none
}

Demo

Fleisig

Just what I needed – Johnsiejohnson

I just had a highlight to the right of the last image. This cleared it up. – Defiance

Didn't work, I had to add this property to my own slide component (which is inside the slick-slide), with react-slick: 0.26.1 – Wachtel

Answer 2

For react slick on Div the solution of causing to outline is:

.slick-slide div {
  outline: none;
 }

Zingg

Answer 3

I obliterated this using:

.slick-slide, .slick-slide *{ outline: none !important; }

Rabelaisian

Every one wants to get rid of the outlines it seems ! kudos – Sculley

Answer 4

Try this it's work for me. You need to add outline: none; for slick slider a tag

.slick-slide {
  &:focus, a {
    outline: none;
  }
}

Industrialize

Answer 5

If you are passing a react Component into your slick carousel, i.e.

<Slider {...settings}>
 <CarouselItem/>
</Slider>

I found that I had to apply the outline: none; style to the <CarouselItem/> component, rather than targeting any of the native slick-* classes.

Avoid

Answer 6

Have you tried to add this into your img tag?: style="border-style: none"/ Try that and see if it works.

Ratha

I tried your suggestion, but it did not work. You can see in my edit that I added a JSFiddle. It shows my problem exactly. – Peculiarity

Answer 7

If you are using bootstrap, beware that the a:focus settings within that code will also cause that blue border to appear. If you either set your slick-slide to !important or change the bootstrap code to a:focus : none; , this will fix it.

Buddha

It appears bootstrap is not being used in the supplied fiddle, so perhaps this should be a comment rather than an answer. – Insightful