Delete chosen border from photo in html

I have a logo carousel on my website and when I click on one of the logos, a black outline appears indicating that it is selected. I've tried using

img::selection {
background: transparent;

}

but it didn't work as expected. I want to get rid of this black outline selection. Here's an example of how it looks:

View Image of the issue

Here is the code snippet:

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;
  }
  /* More CSS styles here */

If anyone can help me remove the black outline on selection, I would greatly appreciate it. Thank you!

Answer №1

If you're looking to resolve your issue, consider implementing the following solution (and don't forget to include !important):

.active-slide {
  border: none;
}

alternatively,

.slider-item {
  border: none;
}

or

.active-slider:click {
  border: none;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for embedding multiple video players on a single HTML page

I'm currently experiencing an issue with the YouTube API. I am in the process of developing a website where I want a video to automatically play when I open its corresponding image. The code I used initially worked successfully: <script> // 2. ...

Why is the session variable in PHP failing to store the value?

Could you assist me with the following PHP code snippet? I'm trying to ensure that when the update function is called, the session variable 't' increments its value. However, every time I run the code, the output remains at Value: 1. What ad ...

In what way can the button display the permission directly on the page?

When the website notification is granted, a green button should be displayed. If it is denied, show a red button instead. The button comes with a CSS style and a checkbox but does not have the permission to grant or allow any permissions on the page. Butt ...

"Adjusting the font size in a blogger's photo caption: A quick guide

I recently switched templates for my blog and I'm having trouble adjusting the size of the caption text under the photos. The template I'm currently using is called Awesome Inc. If you need more information, you can visit my blog here: https:// ...

Crafting a horizontal sub-menu that sits between the parent element and the company logo

Seeking assistance with designing a navigation menu that places the navigation bar above the site logo. I envision the sub-menu expanding horizontally from the navigation bar and positioning itself between the parent navigation bar and the logo. The sub- ...

Display the gridview using <div> elements rather than tables

Does anyone have a code snippet that can display a gridview within a <div> element instead of a table? I would greatly appreciate any assistance with this. I am trying to create a graph similar to the one I have included and would like some functi ...

jquery form submission issue unresolved

I am currently utilizing jQuery version 1.10.1 and here is a snippet of my HTML code: <li> <a href='' id='logout'>Log Out</a></li> <form id='logout_form' method='post'> <i ...

Display the previous item I chose

When using jQuery to display an overview of user selections from a large section of select tags, I am facing an issue. Despite changing my selection multiple times, the code continues to show all previous selections along with the most recent one. This can ...

Issue with Flask app's template rendering when trying to search for a book

Currently, I am working on a Flask web application that has the functionality for users to search for books and view detailed information about them. However, an obstacle I am encountering is that the form does not get sent to the specified URL. Below is ...

What is the best way to conceal my class element if the data-reviews number is under 5?

I have been experimenting with basic JavaScript for the data-reviews="2" scenario and it worked successfully. However, what I am aiming for is to hide the entire <span> section when the value of data-reviews is less than 5 or any specific ...

Learn how to alter the website's overall appearance by changing the background or text color with a simple click on a color using Angular

Is there a way to dynamically change the background color or text color of the entire website when a user clicks on a color from one component to another? I know I need to use the Output decorator, but how can I implement this? style.component.html <di ...

Zero results returned for the angularjs script

I am working on enhancing my skills in angularjs, but I am facing an issue where only the categories are being displayed and the products are not showing up. There are no error messages, so I am having trouble pinpointing where the problem lies. Here is t ...

Exploring options for viewing content on phones and tablets in both portrait and landscape

Recently, I stumbled upon an interesting article discussing @media queries for standard devices. You can check it out here. The article showcases different @media queries applicable to various devices. However, I found myself a bit puzzled. It includes ex ...

`Error with Bootstrap breakpoints in mobile display`

While working on a responsive login layout using Bootstrap 5, I encountered a strange issue. The design looked fine in the web view, but when switching to mobile view, the md and sm breakpoints didn't trigger as expected. However, after pasting the co ...

Submit Form using Ajax - Update text in HTML element upon click

As I am working on developing a message system, I encountered an issue where the message content is not opening correctly in my template when clicking the "See" button. My intention is to implement an Ajax call that will replace the content with jQuery .te ...

Tips for inserting manual line breaks in justified text

My task involves taking a 5-page story from a Word document and implementing it on a website. #reading { hyphens: auto; text-align: justify } <div style="font-size: 20px; width: 750px; margin-bottom: 4em;" class="reading" id="reading"> TextT ...

Ways to eliminate a css class with jquery based on a specific screen dimension

There is a div element that includes a specific class. My goal is to remove this class when the window is resized to fit a mobile view-port. <div class="box"></div> ...

Safari iOS does not properly support responsive images when using srcset and sizes

I am facing an issue with the following code snippet: <img src="/img/footer/logo_white.png?v=2.0" srcset="/img/footer/logo_white.png?v=2.0 1x, /img/footer/logo_white2x.png?v=2.0 2x" > This ...

Discover the underlying element that is being blurred when clicked

Is there a method to determine which element triggered the blur event when clicked outside? I want to update a ui-select value to match what the user typed in if they click outside of the dropdown. However, if they click on a dropdown item, I want to disc ...

Identifying geometric coordinates within Canvas

Currently, I am adding drag and drop functionality to my HTML5 Canvas application. I have encountered a challenge in determining how to detect if the shape being clicked on is not a rectangle or square. For instance, within my 'mousedown' event h ...