Slick.js删除图像周围的蓝色高光
我正在使用Slick.js在模态中构建旋转木马。 一切都很完美，直到我点击图像。 出现蓝色边框，遗憾的是我无法弄清楚如何让它停止这样做。 我试过大纲：没有和边界：没有，但没有成功。 这是我的代码
HTML：
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, }); });
编辑：
这是JSFiddle的链接。 打开模态时，您将看到里面的图像。 单击图像后，图像周围会出现一个蓝色框。 这就是我想要删除的内容。
你需要使用outline: none;
把它放在.slick-slide
.slick-slide { outline: none }
演示
试试这个对我有用。 你需要添加outline: none; 用于滑动滑块a标签
.slick-slide { &:focus, a { outline: none; } }
你有没有尝试将它添加到你的img标签中？：style =“border-style：none”/尝试一下，看看它是否有效。
如果您使用的是bootstrap，请注意该代码中的a：焦点设置也会导致出现蓝色边框。 如果您将光滑幻灯片设置为！important或将引导代码更改为：focus：none; ，这将解决它。