What is the reason for adding the .focus class to the style of the button? This seems to be preventing the appearance of the button from changing. I found this code on the Bootstrap site, where only the .active class is being toggled, not .focus.
<button type="button" class="btn btn-outline-secondary" data-toggle="button" aria-pressed="false" autocomplete="off">
Single toggle
</button>
After testing your provided code, it was clear that the button did not display any focus until I added the focus class. Whenever I encounter these kinds of issues, my go-to solution is using Chrome inspection tools. Pressing ctr + shift + i allows me to check if the loaded HTML file still includes the focus class.
For a visual reference, refer to the example image below. https://i.sstatic.net/LJpOS.png
If this issue persists, it might be a misunderstanding regarding the implementation of the focus class. Take a look at the following example: https://codepen.io/rj99/pen/QQBoma
<button type="button" class="btn btn-outline-secondary" data-toggle="button" aria-pressed="false" autocomplete="off">
Single toggle
</button>
<button type="button" class="btn btn-outline-secondary focus" data-toggle="button" aria-pressed="false" autocomplete="off">
Single toggle
</button>
In Bootstrap 4, the class .focus is used in conjunction with the pseudo-class :focus.
Here's an example:
.btn:focus, .btn.focus {
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
The rationale behind this approach?
The main purpose is to maintain consistency across different browsers.
Styling form elements and buttons can be tricky due to browsers sometimes not following styling rules for these elements or applying their own styles. Browsers that ignore the :focus pseudo-class may still adhere to the styling rules of the .focus class because it is considered a "real" class rather than a pseudo-class.
This reasoning underscores the importance of using the .focus class.
This prevents any changes in button appearance from occurring.
It's important to note that the focus class/pseudo-class only affects the outline (or the box-shadow acting as the outline) of the button, and nothing else.
I recently faced an issue with my premium WordPress theme's navigation menu on the header. Whenever I clicked on it, it wouldn't redirect to the intended page. After some troubleshooting in the Google Chrome element editor, I managed to solve the ...
I currently have a textbox that displays the datepicker when clicked. However, there is now a requirement to add a calendar icon inside the textbox. The datepicker should be displayed when either the calendar icon or the textbox is clicked. Below is the co ...
While testing my webpage's accessibility in Google Chrome Lighthouse, I encountered the following error. I am aware of the significance of properly structured lists in enhancing webpage accessibility. It is perplexing for me to receive this error desp ...
Hey there, I'm really struggling to figure out why this issue keeps happening. I've spent over 5 hours researching online and trying to troubleshoot with no luck. Let me explain the situation. I have a setup with 3 pages (index.html, index.js, a ...
Two issues are currently troubling me. First off, I am facing a challenge with an animation feature that I need to modify within the "popup" class for a gallery section on a website. Currently, when users load the page, a square image and background start ...
Encountering a strange issue that suggests I might be overlooking something simple. Any thoughts on the following: I have a heading tag styled with a sans-serif font (loaded from Google fonts) and when I apply a background-color, the text does not align t ...
Here is the code snippet I am working with: from selenium import webdriver driver = webdriver.Opera(executable_path=r'C:\Users\lolo\Desktop\operadriver_win64\operadriver.exe') driver.get('https://2whois.ru/?t=dns& ...
Here is a sample of my HTML code: <div id="a" class="panels">FIXED PANEL</div> <div id="b" class="panels">Scrolling-Panel 1</div> <div id="c" class="panels">Scrolling ...
I am currently using the MUI linerProgressBar design. I would like to incorporate a custom UI Icon that moves along with the progress. Are there any examples of this available? I have searched for one in MUI but haven't found anything. If you know of ...
One issue arises when applying a rounded border to an image in webkit browsers as the border ends up hidden behind the image. CSS img { border: 10px solid #000; border-radius: 100%; } HTML <img src="http://25.media.tumblr.com/tumblr_mbje ...
I am having an issue with a header that has a video background. It looks great on desktop, but on mobile devices, it is only taking up about 2/3 of the screen width and is aligned to the left side instead of filling the entire width. I have tried several ...
I am struggling to create a full-screen layout using Bootstrap 4, similar to the one shown in this image. I'm facing issues with the left and right columns not taking up the remaining space between the navigation and footer sections. Additionally, I n ...
I've encountered an issue with a hidden div that is supposed to show on page load with a transition. While it works fine in Firefox, Chrome seems to be struggling to display the div. If you'd like to try it out yourself, here's the link for ...
I have 4 different checkboxes, each one corresponding to a specific text box. I want to enable the disabled textbox when its corresponding checkbox is checked. Currently, I have written a function for each checkbox in the HTML tag itself using onclick="doc ...
This is a follow-up from the previous successful discussion on jquery: percentage of two numbers Firstly, I want to express my gratitude for the prompt support provided in the previous post. Now, I am looking to enhance my script further. My goal is to ca ...
I am currently working on integrating an HTML form with a PHP form. The HTML form includes a dropdown menu with different URLs. Upon pressing the submit button, an iFrame is supposed to display the URL selected from the dropdown list. However, I've ...
Hey there! I've been working on creating a Vue page, breaking it down into components, and populating it with content from json. It all seems pretty straightforward, but I've hit a snag. Why is the href parameter not showing up in the right place ...
Is there a way to position the magnifying glass icon to the right side of my input field? Link to my Fiddle. @import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"); body { margin: 30px; } .search { position: relative; ...
Developed a new coupon code system for the admin to generate coupons. In the process, there is a need to calculate the final amount to be paid after applying the discount. An if statement was utilized as shown below: if(!empty($discountCode)) { $amou ...
I encountered an issue while attempting to store the time and date from a form into a variable. An error message indicated that the variable was unknown. Below is the code I used: HTML <div class="form-group"> <label for="dp">Departure Da ...