Personalize checkbox outline in Bootstrap 4

Looking to customize the color of my checkboxes, I followed the instructions provided in the documentation and successfully changed the background color with this code snippet:

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

However, when clicking on the checkbox, a blue border appears along with some padding that I'd like to change as well. Despite doing some research, I haven't been able to figure out how to modify the color of that border. Can anyone assist me? To better illustrate the issue, I created a fiddle.

If you have any insights on changing that border color, please let me know!

Appreciate the help in advance!

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Using the power of Bootstrap 4, a mesmerizing effect is created with the use of box-shadow:

.custom-control-input:focus~.custom-control-indicator {
    -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 3px #0275d8;
    box-shadow: 0 0 0 1px #fff, 0 0 0 3px #0275d8;
}

To achieve the sleek rounded border, the magic lies within the property called border-radius:

.custom-checkbox .custom-control-indicator {
    border-radius: .25rem;
}

Answer №2

If you want to eliminate the blue border and return the active state background to #fff in Bootstrap version 4.0.0, simply apply the following CSS:

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: none;
}
.custom-control-input:active ~ .custom-control-label::before {
    background-color: #fff;
}

Answer №3

Here is a way to create a custom border for checkboxes:

input[type="checkbox"]{
    width: 20px;
    height: 20px;
}
    #with{
        outline: 1px solid #f00;
    }

#shadow-checkbox{
    box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
}

<div class="checkbox">
  <label>
      <input type="checkbox" value="abc" id="with" />
      Option one
  </label>
</div>
<div class="checkbox">
  <label>
      <input type="checkbox" value="" id="shadow-checkbox"/>
      Option one
  </label>
</div>

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

Having trouble getting AngularJS ngCloak to function properly?

My post category page is supposed to display a message if there are no posts. However, the HTML appears briefly when the page loads and then hides. I thought using ngCloak would solve this issue, but it doesn't seem to be working for me. Here's t ...

javascripthtmlcssangularjs

Using Javascript to change CSS in a Polymer application

Coming from a background in angular and react, I am now delving into the world of polymer. I have a polymer class called myClass with the following template. <div id="[[x]]"> Here, 'x' is a property defined in a property getter. stat ...

javascripthtmlcsspolymerpolymer-3.x

Limiting the movement of the mouse within a specific div using the jQuery library

Is there a way to limit mouse movement within a specific div area when the right button is clicked using the jQuery library? Alternatively, could someone provide guidance on how to achieve this, similar to restricting the movement of a portion of the scr ...

javascriptjqueryhtmlmousemove

Inline display malfunctioning for text-containing divs

When creating a style sheet for mobile devices, I encountered an issue where the text was displayed in two columns instead of one column like on desktop. I'm questioning whether the positioning applied to the divs is causing this problem. Please ref ...

htmlcssinline

What is the best way to create spacing between images in a CSS image slider?

UPDATE: I've made significant progress by modifying the code provided in the link below. I am very close to achieving my desired result, but there are parts of it that still puzzle me. The transition now has spacing on both sides and the hidden space ...

htmlcssoptimizationslideshow

Can you place 4 table cells in the first row and 3 table cells in the second row?

Exploring the world of HTML and CSS designs for the first time. Here's a code snippet I've been working on: <html> <body> <table width="100%"> <tr> <td width="25%">&#160;</td> ...

html

Prevent web browsers from interpreting media queries

Creating a responsive website has been challenging, especially when it comes to accommodating IE7. I'm considering turning off ALL media queries for just IE7 while maintaining the styling and layout in desktop mode. Is this possible? ...

htmlcssinternet-explorer-7responsive-design

Strategies for determining the direction of a slide event within a Bootstrap carousel

I am attempting to identify the direction of the slide in a Bootstrap 4 carousel when the user initiates the slide event. Is there a method to achieve this? $('#myCarousel').on('slide.bs.carousel', function () { //Determine wheth ...

javascriptjquerycsstwitter-bootstrapbootstrap-4

Animated scrolling does not function properly with external links that are fully qualified

Currently, I am working on the website julebord.bedriftsdesign.no and have added animated scroll functionality to this page: However, I have encountered a problem. The animated scroll works perfectly fine when using internal anchor links like (#myanchor). ...

javascriptjqueryhtmlcsssmooth-scrolling

Is there an issue with the onClick event in React Buttons when they are generated using the .map()

Is the button created in the .map() function expired after the function ends? It does not seem to work. The code reads from a JSON file that stores an array, loops through it to display items including the button. When clicked, the button should set the d ...

javascripthtmlnode.jsreactjs

Does the display:flex property get passed down through inheritance?

I have been working on this code where I assigned a display:flex to my body element. My understanding was that all child elements within the body would automatically become flex items, considering the body is both a flex container and a wrapper for its chi ...

htmlcssflexbox

What is the best way to eliminate the default background color applied to the body automatically?

I'm currently developing a Covid-19 tracking web application and I am using chartJS to showcase data from an API. In my CSS, I have assigned a background color to all elements with an asterisk (*), but for some reason there are empty spaces around the ...

javascriptcsschart.js

Issue with !important keyword taking precedence not resolved

While working on a navigation bar button, I encountered a specificity conflict with the opacity property. I attempted to use the !important override but it doesn't seem to be taking effect. Any insights into why this might be happening? Here is the H ...

htmlcsscss-specificity

Interactive sign-in/sign-out navigation bar

I need the login button to show as log out when the user is logged in. In the index.js file: app.get('/', (request, response) => { const isAuthenticated = request.session.authenticated || false; // { user: { authenticated: isAuthenti ...

javascriptnode.jsbootstrap-4navbartemplate-engine

How to showcase Twitter Track API on a website

const twitterRequest = twitter_oauth.post( "https://stream.twitter.com/1.1/statuses/filter.json?track=twitter", access_token, access_token_secret Hello, I have successfully implemented a track to display all the latest tweets containing the word "Twitter" ...

javascripthtmltwittertwitter-oauth

Outlook-2010 does not support the current display

Looking for help styling a page that will be opened in ms-outlook 2010. The issue is that it does not support the display attribute. Anyone have a recommendation for an alternative? One suggestion could be to create a class with properties similar to disp ...

htmlcssoutlookoutlook-2010

What is the best way to allocate a unique color to every item within an array?

I've been working on some JavaScript code that pulls a random color from a selection: const colors = [blue[800], green[500], orange[500], purple[800], red[800]]; const color = colors[Math.floor(Math.random() * colors.length)]; Within my JSX code, I ...

javascriptcssreactjscolors

Press a specific button within a row displayed in a table

I have a table displayed below: <table id="tabmailveille"> <tr><td> <button onclick="return Ajax(162, {'idc': '125').value,'action': 'ajout'});"><img alt="Add" src="/Images/tableaux/add.pn ...

htmlseleniumautomationselenium-idebuttonclick

How to Align col-md-5 in the Center Using Bootstrap?

Is anyone else struggling with this dilemma or is it just me? I've been searching everywhere for a solution to my problem but I can't seem to find one. According to the grid system, if you have a column size of col-md-5, centering it should be ...

csstwitter-bootstrapbootstrap-4twitter-bootstrap-3bootstrap-5

Utilizing cheerio to set outerHTML in HTML

Could someone kindly assist me with setting the outerHTML of an element using cheerio? I seem to be encountering some issues with this process. For example, let's consider the following HTML structure: <div class="page-info"> <s ...

javascripthtmlnode.jsnpmcheerio