Ways to eliminate the blue outline on a checkbox in bootstrap 4.1

Bootstrap 4.1

Is there a way to get rid of the blue border on a checkbox that shows up when it is in focus?

https://i.sstatic.net/e77BV.png

I attempted to use outline, but it didn't work as I had hoped.

This is the code I have been using:

<div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customCheck1">
    <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

To see a live version or example, check out: https://jsfiddle.net/hussainabid/mgdjprst/

csstwitter-bootstrapbootstrap-4

Answer №1

A box-shadow effect is applied to the CSS rule: 

.custom-control-input:focus ~ .custom-control-label::before
. To remove this shadow, you can include the following custom CSS (after Bootstrap CSS):

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow:none !important;
}

Note: Instead of using !important, consider being more specific as outlined in the CSS specificity guide.

Example:

.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow:none !important;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

The question was erroneously marked as a duplicate, even though it addresses the issue with the box-shadow and not the outline property. This is due to Bootstrap's default styling that includes a box-shadow.

Answer №2

The standard focus outline does not determine the blue border; rather, it is established by bootstrap using the box-shadow attribute that can be overridden with the following code snippet:

.custom-control-input:focus~.custom-control-label::before
{
  box-shadow: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

Can you answer this straightforward query about CSS positioning?

I am currently facing a challenge in creating a small div (header class) that overlays a main banner image div (banner class). When I maximize my browser window, the positioning is correct. However, upon resizing the browser, the header div maintains its m ...

htmlcss

Adjusting image size according to browser dimensions

I've been struggling to resize a background image on my Square space website dynamically based on the user's browser window size. If the window width drops below a certain point, I want the image to adjust accordingly while maintaining its aspect ...

javascriptjqueryhtmlcss

What is the best way to format or delete text enclosed in quotation marks within an anchor tag using CSS or JavaScript?

I have encountered an issue with a dynamically generated login form. When I select the 'Forgot Password' option, a new 'Back to Login' message appears along with a separating '|' line. Removing this line is proving challenging ...

javascripthtmlcss

It is impossible to change the text color to white

I am working on some JSX code which looks like the following: <div style={Object.assign({}, styles.occupyAllScreen, styles.backgroundContainer)}> <div styles={styles.overimposingText}> <h2 styles={{color: 'white !important& ...

htmlcssreactjsjsx

Occupying both horizontal and vertical space in a Bootstrap column

I have set up my buttons like this: https://i.stack.imgur.com/OMfhp.png In the image, you can see that the Left Option Button is larger, and I want all buttons to be like that. They are supposed to be aligned next to each other as I am using the Bootstra ...

htmlcsstwitter-bootstrap

Stop the page from scrolling

I'm trying to find a way to disable page scrolling, so I used this style for the body: overflow: hidden; Surprisingly, it worked perfectly on desktop but had no effect on mobile devices. After checking out this resource, it seems that creating a ch ...

htmlcss

What is the process for inserting a hyperlink onto an image within a query slider?

I am experiencing difficulties when attempting to add hyperlinks to the images in my slider. I have come to understand that images cannot be clickable in jQuery sliders, so I have tried the following in the HTML: <div class="wrapper"> <div class= ...

jqueryhtmlcss

Problem with Google's PageSpeed Insights - Focus on Making Most Important Content Visible

During the process of creating a comprehensive website for a client who has a strong affinity towards Google tools and recommendations, I have encountered an interesting challenge: Despite my best efforts, I seem unable to attain a flawless score for the ...

javascriptphphtmlcssgoogle-pagespeed

Error encountered when trying to show a modal using a PHP script

I'm encountering an issue with the modal system on my website. Let me share some code snippets: MODALS ARE BUILT WITH W3.CSS LIBRARY modal.js (including debug statements) let modal = null; let title = null; let content = null; $(document).ready(() = ...

javascriptphphtmljquerycss

I am encountering an issue with the jquery.min.js file not loading when I try to utilize the Google CDN for jQuery

Currently in the process of learning about jQuery and testing its functionality, however, I am facing an issue where changes are not being reflected. The error message states that it is unable to load. I have confirmed that I am using Google CDN and also h ...

htmljquerycssvisual-web-developer

Tips for removing the horizontal space between adjacent columns within a Bootstrap card

I have a unique card design that includes... https://i.sstatic.net/3p1Wo.png <div class="d-flex align-items-stretch col-6 col-sm-6 col-md-4 col-lg-4 col-xl-4 p-2 "> <!-- Custom Card Design --> <a href="https://www.example.com" clas ...

twitter-bootstrapbootstrap-4

What is the best way to increase the padding in a Colorbox modal window?

Is there a way to increase the padding in a Colorbox modal window? I want some extra space between the edges of the modal window and the actual content. I experimented with the innerWidth and innerHeight properties, but unfortunately, I didn't notice ...

jquerycsscolorbox

Having difficulty with adding a floating button to a Django template

I have been attempting to create a floating button similar to the one demonstrated in this video. Unfortunately, I am encountering difficulties in replicating the same effect while trying to incorporate it into one of my Django templates. Below is the HTM ...

htmlcssdjango

I need the links to open up the content area on the website in HTML

Is it possible to have a fixed header that does not disappear when clicking links from the navigation bar? I tried dividing the page into tables to achieve this. Now, I want to open the links in the navigation bar in the right column (the main content col ...

phphtmlcss

Adjust the container size based on changes in font size

One interesting issue I encountered involves displaying each word in a sentence in separate div elements using inline-block with a max-width of 120px. When attempting to increase the font size within the parent div, the inline-block divs begin to overlap d ...

javascriptjquerycss

What is the best way to set up the correct pathway for displaying the image?

I'm currently facing a challenge with displaying an image from my repository. The component's framework is stored in one library, while I'm attempting to render it in a separate repository. However, I am struggling to determine the correct p ...

javascriptcssreactjsmaterial-ui

Is it possible to protect assets aside from JavaScript in Nodewebkit?

After coming across a post about securing the source code in a node-webkit desktop application on Stack Overflow, I began contemplating ways to safeguard my font files. Would using a snapshot approach, similar to the one mentioned in the post, be a viable ...

javascriptcssbinaryfont-facenode-webkit

How to prevent table row from highlighting on hover in Angular Bootstrap

In my project, I have a table that showcases various details and allows users to select certain rows. Some of these rows have child rows which can also be selected. The requirement is for the parent rows to be selectable only if they do not have any child ...

javascripthtmlcssangularjstwitter-bootstrap

How can I show the configuration in Laravel?

After updating my pages to utilize an extended header for consistent content across all pages, I encountered an issue with the footer configuration. Whenever I attempt to retrieve a configuration from Laravel, it appears as normal text instead of being pro ...

phphtmlcsslaravel

A comprehensive guide on how to find keywords within an array and then proceed to make all text within the parent div tag stand

I am currently looking for a webpage that displays a list of products based on keywords from an array. Once it detects any word in the array, it highlights it with a red background - everything is working smoothly so far. However, I now wish for the script ...

javascripthtmljquerycss