I am currently attempting to eliminate the blue "halo" outline that appears on form elements in Firefox on OS X. I have successfully removed the halo in Safari on OS X using CSS with the following code:
input {
outline: none;
}
However, this method does not seem to work in Firefox, and neither does the -moz-outline property.
An alternative solution to eliminate the 'halo effect' is as follows:
*:focus {outline: none;}
You could consider adding !important if necessary, although I personally haven't encountered a situation where it was needed.
:focus {outline:none;}
::-moz-focus-inner {border:0;}
Without having OSX to double-check, I'm taking a chance here. What if we try eliminating the border?
input {
border: none;
}
I suspect that the formatting for all form elements is actually saved in the forms.css file. In MacOS, specifically in OS X, you can usually find this file here:
/Applications/Firefox.app/Contents/MacOS/res/forms.css
If you take a look at that file, you may be able to identify any CSS rules that are impacting the appearance of the forms. For instance, on Windows, the input element has a property like -moz-appearance: textfield;, which might have an undocumented effect. It's possible that there are intrinsic -moz-* styles on these fields causing the glowing effect, which could potentially be overridden.
One approach could be to overwrite all existing styles in the file by changing the definitions for input to something different like
input2</code (after creating a backup copy). This way, you can experiment with altering the default CSS to see if you can eliminate the glow effect.</p>
<p>To pinpoint the specific style causing the unwanted effect, gradually reintroduce styles back into the file one by one while testing. You can streamline this process by excluding styles that are clearly irrelevant from consideration (e.g., properties like <code>line-height: normal !important;It's possible that an active user style sheet on your computer is causing this behavior. Some add-ons do this to make the focus more noticeable. Check the Firefox chrome folder in your user files for any customization. Alternatively, you can try adding the following code:
input {outline: none!important;}
Additionally, consider the following:
These options take precedence over the !important attribute, so it's important to investigate each possibility: * User stylesheets * Stylysh * Greasemonkey * Other add-ons
One of these sources may be responsible for the unwanted outline effect.
After exploring the numerous recommendations provided here, none proved to completely solve the issue at hand. However, I discovered that by creating a custom border style like so:
border: 1px solid #000;
I was able to eliminate the focus halo effect. Though this did change the appearance of the input element. Using border-style: inset; came closest to mimicking the "native" look, but it still wasn't perfect. At this point in time, it seems like you can either remove the halo or opt for a more natural-looking input.
Yes, this seems to be the solution you need:
input:focus { outline: none; }
I have been utilizing the following code snippet to highlight text segments in Codemirror, a renowned code editor and syntax highlighter that can be downloaded from this link. Despite referring to the documentation, I am still unable to grasp how this fun ...
(I apologize for not discovering this earlier, but it seems that Chrome-Android also does not support the font I intended to use. The fallback-to-sys-default-font-trick used by Chrome-Android did fool me.) I had planned to incorporate unicode-range to add ...
I am looking to design a navigation menu with items that can accommodate one or two lines of text. The items should have consistent height and the text should be vertically centered. Additionally, I want the entire box to be clickable, not just the text w ...
While attempting to locate frames in the Firefox browser, I am not seeing the "This frame" option available. My current setup includes Firefox version 48.0.2564.109 with Selenium. Any assistance in resolving this issue would be greatly appreciated. Thank ...
Is there a solution to the issue where the Google Share button does not display properly when it is initially hidden using CSS display:none on its parent div and then shown using jQuery .show()? I am currently experiencing this problem and I'm unsure ...
I am attempting to utilize the imagemagick command "convert" in order to generate a .tif image from a .png file. Here is the code I have come up with: $exec = "/opt/local/bin/convert -adaptive-resize 150% ".$pos.".png ".$pos.".tif"; exec($exec); When I ...
This code is functioning properly in Mozilla and Opera, but it is not working in IE. Any assistance on this issue would be greatly appreciated. The JavaScript is working fine, however, in IE 10 only the back panel is displayed. Thank you for your help. h ...
I am trying to achieve a layout similar to the following scenarios: Case 1: If the text is longer than the screen width +--------------------------------------+ | very long teeeeeeeeeeeeeeeee.. (1234)| +--------------------------------------+ Case 2: If ...
Within the page, I noticed some margin to the right that extends beyond the body itself, causing a scroll bar to appear at the bottom. However, I'm unable to determine the root cause of this issue. I have provided links to both Codepen and Netlify be ...
Hey guys, I'm having a real head-scratcher here. I've created a dropdown menu using Bootstrap 4, but I'm having trouble making it responsive for mobile screens. I've tried using media queries to make the dropdown menu occupy 100% width ...
Here is the HTML code for a div block I am working with: <div className={'row ge-container'}> <div className={'a-span3 ge-container-navigation'}> hello </div> <div className={'a-span9 ge-containe ...
Struggling to horizontally center an image within an anchor tag? Despite trying various methods like setting it as a block element, applying auto margins, and nesting divs, the image stubbornly remains aligned to the left. Even after looking at other resou ...
I have recently encountered an unexpected issue with my full-width video header that worked perfectly on multiple pages before. Strangely, a thin black line has appeared around the bottom and right side of the div (.header) containing the video, even thoug ...
Need help with moving an image behind textboxes and a sign-in button? Check out my issue: https://i.stack.imgur.com/cGoEU.png The image is currently covering the login form. How can I position it properly? Here's the code snippet causing the issue: ...
I have a CSS file that looks like this: .table_class1DeffCell { border-top-width : 1; border-left-width : 1; border-right-width : 1; border-bottom-width : 1; } .table_class11DeffCell { border-bottom-color : 000000; border-top-color : 000000; border-right- ...
My webpage retrieves SNMP data using PHP and displays it with HTML, color-coding the values. I want to add a pop-up alert when a value exceeds a certain number. I have attempted different jQuery solutions without success. The PHP code to get the value: ...
I have implemented Material Design Lite for creating cards on my website. I encountered an issue where the menu I added to the card only displays within the bounds of the card. I would like it to overflow similar to this example () Here is a link to my fi ...
How can I make the orange and blue area extend to the end of the screen or have the full screen size minus the height of the navbar? When using `vh-100`, it fills the full height but creates a vertical scrollbar which is not desired. Is there a way in Boot ...
This problem has been puzzling me for quite some time now, and I just can't seem to find the solution! Kindly disregard the other language and code - the card is located under the jumbotron. (To access the link, remove spaces: https://code pen.io/ano ...
Imagine an app that can place input text fields on top of an image, creating a workspace. The challenge is to position these fields using specific coordinates (top, left, width, height) that are relative to the image itself (top/left = 0/0). How can one ac ...