Quickly switch the outline state of a Bootstrap toggle button

Using the latest version of Bootstrap (5.0) that supports importing from inline HTML, I am working on creating a toggle outline button as shown below.

<button type="button" class="btn btn-outline-dark" data-bs-toggle="button" autocomplete="off" aria-pressed="false" >{{mode}} Mode</button>

Upon the first click, the color instantly changes from transparent to filled. However, the issue arises when clicking it for the second time, as the button does not instantly change the color back from filled to transparent. One has to click elsewhere to trigger this change.

Is there a way to ensure that the color changes from filled to transparent instantly after clicking, without the need to click elsewhere?

htmlcssangularbootstrap-4toggle

Answer №1

Is this similar to what you're looking for?

main.css

.btn-check:focus + .btn-outline-light,
.btn-outline-light:focus {
  box-shadow: 0 0 0 0;
}

.btn-check:focus + .btn,
.btn:focus {
  outline: none;
  box-shadow: 0 0 0 0;
}

modified stackblitz

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

Utilizing the Masonry jQuery plugin for optimizing empty spaces

Recently, I came across the Masonry plugin and I'm considering using it in a project. One question that intrigues me is whether there is a way to detect empty spaces that occasionally show up in the layout when divs are positioned. Being able to ident ...

javascriptjqueryhtmlcssjquery-masonry

Utilizing values from .properties files in Java with Spring for internationalization: A straightforward approach to handle Strings

Here is the code snippet I am using: @Value("${app.user.root}") private String userRoot; This code helps me to fetch a constant value from my application.properties file. Within my GetMapping method, I need to redirect to the error page and pass a S ...

javahtmlspringspring-mvc

Placing a logo to the left of a UL list

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> & ...

jqueryhtmlcss

Delaying CSS Keyframe animations

I'm having trouble getting the color squares in my table to appear one by one. I want each color to show up, then disappear, followed by the next color appearing and disappearing, creating a light sequence effect. Any advice or assistance would be gre ...

htmlcss

PyQt TreeView scrollbar obstructing the header

I've been experimenting with the QTreeView widget (instead of QListView) in order to have a horizontal header. Additionally, I wanted to use stylesheets to customize the colors and appearance of the header and scrollbars. However, there is an issue w ...

pythoncsspyqt

Utilizing event binding with ngForTemplate in Angular 2

Imagine having a straightforward list rendering component: import {Input, Component } from 'angular2/core' @Component({ selector: 'my-list', template: ` <div *ngFor='#item of items' (click)='onItemClicked(i ...

angular

Guide on linking navigation to various buttons on the Angular menu

I am looking to enhance the functionality of my left menu buttons by adding a navigation path to each one (excluding the main menu). The menu items' names are received as @Input. I have set up a dictionary mapping all the items' names to their r ...

javascripthtmlangulartypescriptmenu

The LESS file could not be located. Attempted to find -

My directory structure is as follows: C:. └───static ├───custom_stuff │ presets.css │ presets.less │ └───index index.less However, I'm encountering an issue where index.less c ...

cssless

Is it possible to ensure that a newly created element functions in the same way as an existing element?

I am currently in the process of developing an application that empowers users to generate new items, modify existing items, or delete items by utilizing corresponding icons located adjacent to each item. When it comes to existing items, the action icon d ...

jqueryhtmlcss

Error Encountered While Uploading to Firebase Functions: HTTP Error: 400, Mysterious Issue Un

Whilst attempting to deploy the server side of my Angular Universal SSR app to Firebase Functions, I encountered an issue with the error message Upload Error: HTTP Error: 400, Unknown Error. My understanding is that this error commonly occurs when deployi ...

node.jsangularfirebaseexpressgoogle-cloud-functions

PhoneGap nested executeSql not functioning properly on iPad Simulation

My application seems to be working perfectly in Win-Safari, but encounters issues when wrapped by PhoneGap. Below is the code snippet: // working db connection db.transaction(function(tx) { tx.executeSql('SELECT * FROM tbl', [], function(tx, r ...

jqueryipadhtmlsqlitecordova

A guide to accessing the sibling of each selector with jQuery

Imagine you have the following HTML structure: <div class="parent"> <div class="child"></div> <div class="sibling">content...</div> </div> <div class="parent"> <div class="child"></div> <div ...

javascriptjqueryhtmlcss

Looking for a way to ensure a div reaches 100% height within a specified area without exceeding the boundaries of the body?

I am working with jQuery mobile and have specific requirements for my project: The main content will be a large graphic that needs to fill the entire page, with both horizontal and vertical scrolling if necessary. The header should remain fixed at the to ...

jquerycsshtmljquery-mobile

My component reference seems to have gone missing in angular2

Trying to load my Angular 2 app, I encountered this error: https://i.stack.imgur.com/FmgZE.png Despite having all the necessary files in place. https://i.stack.imgur.com/kj9cP.png Any suggestions on how to resolve this issue? Here is a snippet from ap ...

javascripthtmlintellij-ideaangular

Using Angular's asyncValidator in conjunction with BehaviorSubject allows for real

Currently, I am working on developing an Angular form. Below is a snippet of my code where I am attempting to construct a multi-group form with an async validator. The scenario involves validating whether a number exists in a specific list. In a real-worl ...

angularrxjsbehaviorsubjectangular-reactive-forms

Style the ul and li elements inside a div using CSS

Is there a way to specifically target the <ul> and <li> elements within a designated <div>, rather than applying styles globally? Here is an example of the HTML structure: <div id="navbar_div"> <ul> <li>< ...

htmlcsshtml-lists

Displaying information stored in a database as notifications in the notification icon within the HTML/PHP header

Within my MySQL database, there exists a table named order_detail. This table is populated with values from my android app. I am looking to display the order_id as a notification in my admin panel, which is built using HTML/PHP. The attributes of the orde ...

phpandroidhtmlmysql

Generate an HTML table and import it into Excel while retaining its styling

Has anyone successfully exported tables from an HTML document to Excel while preserving all CSS styles? My application can generate HTML code for a table, but I need to export the exact same table to Excel. I am using OpenXML. Could it be necessary to uti ...

htmlexcelopenxml

Angular-Slickgrid experiencing issues with dropdown functionality

I recently downloaded the source code from this link and checked out the demo. However, I noticed that the single select dropdown functionality was missing in the demo. Therefore, I made some modifications to the code specifically for the last row "complet ...

angulargridslickgridangular-slickgrid

What is the best way to create a video that takes up the entire height of a half-sized

page url: I am facing a challenge with displaying a video that has dimensions of 4096x2160 pixels. I want to show the centered part of the video with full height on my left half screen. Despite trying various methods, I have not been able to find a suita ...

htmlcsshtml5-video