title: Slick.js remove blue highlight around image
body: <p>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</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="openModal" class="modalDialog"&gt;
      &lt;div id ="background"&gt;
          &lt;a href="#close" title="Close" class="close"&gt;X&lt;/a&gt;
              &lt;div id="logo"&gt;
                  &lt;img src="/media/{{ gallery.logo }}" alt="Smiley face" height="100" width="150"&gt;
              &lt;/div&gt;
              &lt;div class="multiple-items"&gt;
                          &lt;div&gt;&lt;img src="/media/{{ gallery.image1 }}" height="200" width="300"&gt;&lt;/div&gt;
                          &lt;div&gt;&lt;img src="/media/{{ gallery.image2 }}" height="200" width="300"&gt;&lt;/div&gt;
                          &lt;div&gt;&lt;img src="/media/{{ gallery.image3 }}" height="200" width="300"&gt;&lt;/div&gt;
                          &lt;div&gt;&lt;img src="/media/{{ gallery.image4 }}" height="200" width="300"&gt;&lt;/div&gt;
                          &lt;div&gt;&lt;img src="/media/{{ gallery.image5 }}" height="200" width="300"&gt;&lt;/div&gt;
                          &lt;div&gt;&lt;img src="/media/{{ gallery.image6 }}" height="200" width="300"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>/* 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;
  }
  </code></pre>
  
  <p>JQuery:</p>
  
  <pre><code>$(document).ready(function(){
      $('.multiple-items').slick({
        infinite: false,
        arrows: false,
        slidesToShow: 3,
        slidesToScroll: 1,
  
  });
    });
  </code></pre>
  
  <p>EDIT:  </p>
  
  <p>Here is a link to the <a href="https://jsfiddle.net/codemesoftly/x09xryyv/">JSFiddle</a>. 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.</p>