Ryan113 Ryan113 - 16 days ago 5
CSS Question

Slick.js remove blue highlight around image

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

You need to use outline: none;

Put it on .slick-slide

.slick-slide {
    outline: none
}

Demo

Comments