Unable to modify the focus outline for .custom-control-input within Bootstrap 4

After spending countless hours attempting to change the focus outline color of the custom bootstrap controls, I have hit a roadblock.

Changing the background is a breeze with:

.custom-control-input:checked~.custom-control-indicator {
background-color: red; 
}

However, targeting the outline color seems to be an insurmountable task. I've experimented with:

input.custom-control-input:focus {
    outline: none !important;
    outline-color: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    background-color: transparent !important;

}

Has anyone encountered this issue as well?

Check out my fiddle here: https://jsfiddle.net/robsilva/ht1cjLrb/1/

Your help is greatly appreciated!

cssbootstrap-4

Answer №1

.custom-control-input:checked~.custom-control-indicator {
  background-color: red!important;
}

.custom-control-input:focus ~ .custom-control-indicator {
    box-shadow: none !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" rel="stylesheet"/>
<label class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input>
  <span class="custom-control-indicator"></span>
  <span class="custom-control-description">Select this unique custom checkbox</span>
</label>

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

Attempting to generate an absolute Xpath for the Add button, which is a subelement

I'm struggling to locate the Add button on our website, which I am in the process of automating using Python and WebDriver. Despite trying various Xpath suggestions without success, I've consulted with the developer who informed me that the butto ...

pythoncssxpathselenium-webdriverwebdriver

Revolutionary scroll-based navigation fill transition

I'm attempting to achieve an effect where the fill color of the "insticon" SVG changes from black to white based on the scroll position indicated in the jQuery code. I have made the necessary modifications in the if and else statements, but unlike "he ...

javascriptjqueryhtmlcsssvg

Developing an unchanging structure for HTML pages

I need assistance in designing an HTML layout with a fixed toolbar at the top and bottom, along with a single centered DIV that should be responsive when the user resizes the window both vertically and horizontally. I have attached a mockup/screenshot fo ...

csshtmllayout

Adjusting image size within floating containers

I am working on a design with two floating divs, one on the left and one on the right, both nested within a main div. Each floating div contains an image that needs to be resized to the maximum size possible without differing sizes. This is what I curren ...

cssautoresize

When using jquery, the .css("border-color") method fails to provide a return value

I came up with the jquery javascript below $(document).mousemove(function(event) { var element = event.target; $(element).css("border","black solid 1px"); }); $(document).mouseout(function(event) { var element = event.target; console.log ...

jquerycssborder

"Is it possible to keep an eye on two different events and take action once they both

I have a menu with different submenus for each list item, all utilizing the same background tag. Currently, when one submenu is open and I hover over another list item, the previous submenus hide and the new one opens. What I want is for the content to cha ...

javascriptjqueryhtmlcss

What could be causing the div to be wider than the content inside of it?

I am having an issue creating a webpage with a 20-60-20 flex fill layout. The div in the center, which should occupy 60% of the page, is wider than its content, causing it to appear off-center. https://i.stack.imgur.com/WwCJy.png Here is my home.componen ...

htmlcssangularangular-flex-layout

Aligning the Navigation Bar to the Upper Right Corner

I'm attempting to rearrange my Nav Bar to be at the Top Right, with my logo on the Top Left all in one line. Unfortunately, I'm struggling to achieve this and could really use some guidance. As a newcomer to HTML and CSS, I find it challenging to ...

htmlcss

Tips for creating a script that compiles all SCSS files into CSS within a Vue 3 project

Within my project, there exists a file named index.scss located in the src/assets/styles directory. Adjacent to this file are multiple folders housing SCSS files that are ultimately imported into index.scss. My objective is to devise a script within the pa ...

cssvue.jssass

How can I create a table that is 100% width, with one column that has a flexible size and truncates text

I am currently facing an issue with a table nested within a div that is absolutely positioned on my webpage. I want to set specific widths for the second, third, etc columns while allowing the first column to automatically resize, even if it results in tru ...

htmlcsshtml-table

Determine whether a WebElement contains a particular content within the :after pseudo class

After locating my element in Selenium, I've come across an interesting challenge. IWebElement icon = box.FindElement(By.ClassName("box-icon")); Sometimes, this element (icon) has a content set as follows: &:after { content: $icon-specia ...

javascriptjquerycssselenium

Can someone assist me in creating a clickable link that opens a menu in HTML when clicked?

I have been attempting for the past few days to open the megamenu by clicking on a link, but despite my efforts, I have not been successful. After reviewing some code, I discovered a clue in the CSS. It seems that setting the visibility value to visible wi ...

javascripthtmlcss

After the page is reloaded, apply a class to the divs by selecting them based on the "data" attribute

I have a set of four cards labeled "card", each representing different body parts: eyes, torso, arms, and legs. <div class="card" data-lesson="eyes">eyes</div> <div class="card" data-lesson="torso">torso</div> <div class="card" ...

javascriptjqueryhtmlcsslocal-storage

Make the background image draggable while maintaining its size with background-size:cover

I'm working on a fixed div with an image as the background, set up like this: <div style=' width:230px; height:230px; background-repeat: no-repeat; background-image:url(img/myimage.jpeg) background-size: cover;'&g ...

jqueryhtmlcss

Changing Parameters in Absolutely Positioned Sections

I have successfully created a fixed header with a higher z-index than the body content, allowing the content to slide underneath it. To position the content div directly below the fixed header, I applied a position:relative and specified a top value. Init ...

htmlcssposition

Update the content of an HTML element without having direct access to the HTML code

I am currently in the process of creating a website using a website builder, and I am interested in customizing the default message that is displayed when a required field in the website form is left empty. The form in question is an integral part of the w ...

javascripthtmlcss

Hover and hover-off functions in navigation menu

html <div class="hidden-nav"> <h4>lorem</h4> <ul class="decor-menu-list"> <li><a href="#">123</a></li> <li><a href="#">123</a></li> <li><a hre ...

javascriptjqueryhtmlcss

Change the color of the div's background

My grid created using bootstrap 3 divs consists of a button, followed by a radio button, and then another button. I want to highlight these elements with a consistent background color that stretches across like a single row. Check out my attempt on this f ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Customizing the label styles within MUI's Chip component

Incorporating React with MUI's library has been a seamless experience for me. One of the key MUI components I have integrated is the Chip Within this particular Chip, there lies the label attribute, offering the option to showcase a text f ...

javascriptcssreactjsbootstrap-4material-ui

Tips for aligning the first row of a table with a line of text

I need assistance aligning the first row of a table with a line of text. Specifically, I am trying to achieve ** some text ** |first row of table      |             ...

htmlcss