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.

Answer 1

You need to use outline: none;

Put it on .slick-slide

.slick-slide {     outline: none } 

Demo