Remove selected outline from image html

Question

So I have a logo carousel. Whenever I click on one of the logos, there appears a black outline. Meaning that it is selected. I already tried using

img::selection {
background: transparent;

}

but it didn't really work. I want to remove that black outline selection. Here is an example of how it looks.

Image of the problem

Here is my actual code.

HTML

<section class="customer-logos slider pb-5">
        <div class="slide"><img src="logos_clientes/img1.png"></div>
        <div class="slide"><img src="logos_clientes/img2.png"></div>
        <div class="slide"><img src="logos_clientes/img3.png"></div>
        <div class="slide"><img src="logos_clientes/img4.png"></div>
        <div class="slide"><img src="logos_clientes/img5.png"></div>
        <div class="slide"><img src="logos_clientes/img6.png"></div>
        <div class="slide"><img src="logos_clientes/img7.png"></div>
     </section>

CSS

.slick-slide {
    margin: 0px 20px;
  }
  .slick-slide img {
      width: 100%;
  }
  .slick-slider
  {
      position: relative;
      display: block;
      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;
  }
  .slick-loading .slick-slide
  {
      visibility: hidden;
  }
  .slick-vertical .slick-slide
  {
      display: block;
      height: auto;
      border: 1px solid transparent;
  }
  .slick-arrow.slick-hidden {
      display: none;
  }

Sorry for the long code. I was hoping someone could help me to remove the black outline? Thanks!

Hey. Someone left a comment with the solution and it worked. Thanks a lot — Iñigo Zepeda, Aug 08 '20 at 22:08

s.kuznetsov · Answer 1 · 2020-08-08T20:20:50.813

0

Your problem can be solved if you do it like this (also, try adding !important):

.slick-active {
  outline: none;
}

or

.slick-slide {
  outline: none;
}

or

.slick-slide:active {
  outline: none;
}

edited Aug 08 '20 at 20:20

answered Aug 08 '20 at 20:15

s.kuznetsov

14,870
3
10
25

Thanks a lot! The second option worked – Iñigo Zepeda Aug 08 '20 at 22:08
If my answer helped you, then mark it by clicking on the checkmark to the left of my answer. thank. – s.kuznetsov Aug 08 '20 at 22:10

Remove selected outline from image html

1 Answers1