No matter what I do, I can't seem to change the active background in CSS. It keeps defaulting to the btn-primary bootstrap style.
<button id="home" type="button" class="btn btn-primary active"
href="#home">Home</button>
.btn:active, .btn:hover, .btn:target{
background-color: rb(0, 0, 0, .7);
}
That's due to the concept of CSS specificity.
The selector used in Bootstrap is
.btn-primary:not(:disabled):not(.disabled).active.btn-primary:not(:disabled):not(.disabled).active {
background-color: rgba(0, 0, 0, .7);
}
Visit this link for more information.
Avoid using !important as it is considered bad practice.
For further reference, check out:
Customizing Bootstrap CSS template
To override the Bootstrap CSS selector with your own, make sure to enforce your CSS selector. One simple way to achieve this is by adding !important at the end:
.btn:active, .btn:hover, .btn:target {
background-color: rgb(0, 0, 0, .7) !important;
}
If you want to learn more about CSS Specificity and how browsers determine which overlapping CSS rules to apply, check out this resource.
Currently, I am working on creating an exam page that features choices with checkboxes. My goal is to have the background of a selected choice change color. However, I am encountering some obstacles. To view the codes and screen, please click here Here i ...
I am struggling with aligning the following line of text that includes percentages like 100% and 99.8%. Is there a way to display all these elements in one line, side by side? <span style="font-size:12px;font-weight:bold;padding-left:800px;">99%& ...
I've been struggling to make this work properly. Even after removing the AJAX POST function, the issue persists. No alerts or any indication of what's going wrong. Check out the code on JSFiddle: HTML <div class="notification"> ...
I'm in the process of removing jQuery dependencies from my app, but I still rely on Bootstrap. Is there a way to trigger modal functions like $('#myModal').modal('show') without using jQuery now? ...
I have a question regarding cross-browser compatibility that I need help with. Currently, in my design project, I am using the display:inline-block CSS style option to achieve a specific layout and style. However, this is not supported by IE8 and other ol ...
After spending several hours trying to solve this problem, I've hit a roadblock. The challenge lies in dynamically adding items to a list using JavaScript and the Dojo library. I've experimented with both vanilla JS and Dojo code, ruling that pa ...
I'm encountering an issue where the CSS layout doesn't load when I try to view the document. Here's the content: <!DOCTYPE html> <html> <head> <body> <title>Waden B. Greaux Jr.</title> & ...
My CSS skills are not very strong. How can I center the text "My Website" in my navbar based on this code? You can view a working example on JSFiddle here: https://jsfiddle.net/cvp8w2tf/2/ Thank you for your assistance! ...
I am completely new to all of this, so please bear with me. Here's my current situation: So, I've set a background image for the entire body of my website. I have a div called .wrapper that I use on all of my pages. Its main purpose is to keep m ...
I am just starting out with Angular and I'm trying to retrieve user input from a textarea, but I've been unsuccessful so far. Revision: ng-model="num1" > [(ngModel)]="num1" HTML: <span><input [(ngModel)]="num1" type="text" placehol ...
I'm currently working on setting up a form and validating it with Element UI. Despite closely following the documentation, I am encountering an issue where clicking or typing into the input boxes triggers a RangeError: Maximum call stack size exceeded ...
Whenever I set a simple font rule for my text, the output is not displayed correctly and appears blurry. The font looks fine in Mozilla Aurora browser but displays poorly in newer versions of Google Chrome and Firefox. Does anyone know why this happens? I ...
Hey there! I'm showcasing my portfolio using lightbox, but I've run into a little issue. When the browser height is full, everything looks great - you can see the entire image, along with the paragraph and buttons. https://i.stack.imgur.com/UCJG ...
Is there a way to loop through an array and change the CSS background color chronologically rather than randomly? Additionally, is it possible to reverse through the same array when the back button is clicked? http://jsfiddle.net/qK2Dk/ $('#right&a ...
I have a div containing a b-table that I need help adjusting the height for. I want to make the table scrollable with a fixed header. Can anyone assist me? Here is my code: Code inside the template: <div class="tbl-barangay"> <b-table stripe ...
I have centered heading text in a container, and I am using a border-bottom and pseudo element to create an underline effect. However, I am uncertain about how to make the underline stop at the end of the heading text. https://i.sstatic.net/FseHl.png Her ...
Looking to create a straightforward menu bar using the ul tag with 4 links. The ul spans 100% of the screen width, so each li element should be 25%. I attempted to implement this, but the final list item ends up dropping to the next line. However, setting ...
A switch button located in the top right corner can toggle between light and dark modes. The background features a zoomed-in image. Currently, the transition is as follows: From left to right when switched to dark mode From right to left when switched to ...
Imagine you have a JavaScript array structured like this: [ "Heading 1", "Heading 2", "Data 1", "Data 2", "Data 3", "Data 4", ] Your task is to generate an HTML table from this array that looks like the one in this link: https://i.stack.imgur.com/7laUR. ...
I recently developed a website optimized for monitors, but when I viewed it on an iPad, the right corner was missing some CSS styles. Take a look: Here is the HTML code: <div id="nav-top"> <div class="wrapper"> <!-- To ...