I'm trying to remove the blue "halo" outline that form elements have in Firefox on OS X. Using CSS, I can remove the halo in Safari on OS X, via:
input {
outline: none;
}
But this seems to have no effect in Firefox, nor does the -moz-outline property.
Another option, that takes care of all of the 'halo' is this:
*:focus {outline: none;}
I guess you could add an !important if you wished, but I haven't run into the need yet.
:focus {outline:none;}
::-moz-focus-inner {border:0;}
I'm going out on a limb since I don't have OSX to test it... but does removing the border work?
input {
border: 0;
}
I believe the style of all the form elements are stored in the forms.css file. In OS X, I think it is located here:
/Applications/Firefox.app/Contents/MacOS/res/forms.css
You may want to browse through that file and see if there is any obvious CSS that is affecting the appearance you are seeing. For example, on Windows the input element has -moz-appearance: textfield;, which I couldn't find any documentation on, so perhaps there is some "native" -moz-* style on those fields that is controlling the glow, something you could possibly override.
The other thing to try might be to override everything in that file by changing the input definitions to input2 or something (after making a copy of course). Then you can see if you can get the glow to stop at all by manipulating the default CSS.
Once you've determined you can make it stop (if you can), you can add styles back in a bit at a time until you find the one that causes the effect you don't want. You can probably speed up that process by eliminating styles from your testing that obviously aren't related (e.g. - line-height: normal !important; is almost certainly not responsible for a blue glow around the fields).
Maybe you have an active user style sheet in your machine creating this behaviour. Some add-ons do this (to make the focus more obvious).
Look into the firefox's chome forder (in your user files)
Alternatively try with
input {outline: none!important;}
Also
The Stylish plugin has a style for this, maybe you have it installed?
There are greasemonkey script that do this. If you have it installed, disable it
They both take precedence over the !important attribute.
So: you have several places to look into
* User stylesheets
* Stylysh
* greasemonkey
* anothes add-on
One of those must be forcing the outline
I went through the various suggestions made here, but none seemed to be able to fully address the problem. By defining a custom border style, i.e.
border: 1px solid #000;
I'm able to get rid of the focus halo, but this obviously alters the look of the input element. border-style: inset; seems to most closely resemble the "native" look, but it's still not quite right, so as far as I can tell right now, you can either suppress the halo, or have a natural looking input.
I believe this is what you are looking for:
input:focus { outline: none; }
Related
I have read many posts and tried quite many things but I don't seem to get an embed form to work the way I need it to work.
Problem with input on focus:
1. Blue outline > I tried the code below I seemed to work and then suddenly it stopped working.
input:-webkit-autofill:focus {
outline: none !important;
}
2. Yellow background > I got it fixed with the code below.
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0px 1000px #ffefef inset !important;
}
I would like the form to always look like this (normal, hover, focus, active
But that's sadly not the case because of "user agent stylesheet".
You can see the form in live here →
Also note, I am not a programmer. I know WordPress well enough but any tricky answers might get me confused. I would like to solve this problem either using .css or adding some JavaScript code in the header/footer element.
And I also tried Normalize.css which, I guess, I could just add to my theme folder with the same name... forgive my dummyness. If so, that didn't help. Well, I don't know if I was supposed to add a new line there or not.
Any help would be highly appreciated (praying hands).
#drip-first-name:focus, #drip-email:focus {
outline: 0;
border-bottom: 3px solid black !important;
}
make sure you prefix it for different browsers(Not sure if needed) and of course do the same for active etc (wherever you get that blue outline) . This will work for chrome.
However, a few notes. since you're messing with css you need to start using Chrome Devtools. It's free and built into chrome. This will show you what's wrong and how to fix it.
Secondly, using !important in css is not a major no no but the reason your border-bottom rule wasn't working was because you had already used !important in a previous class and it was picking it up. Important won't let you override anything unless it's lower in the CSS stylesheet and is also marked as important. Long story short at some point you will have to redo the whole thing if you keep using important.
this is how it would look to you with devtools open:
This is the link for you to get started with devtools:
Devtools
apply outline:0 to the input normal style not :hover or focus, then remove
border-width: inherit !important; from the :focus of the input, because then it takes it's parent border width, and that is 0px therefore your border disappears on focus.
Well if you'd like you can remove all the default userAgent-styling by using the all: unset; ? That works for me.
But if you just want to remove the outline you shall do
input { outline: none; }. Hope that helps.
Edit: the all: unset is there for remove all user Agent Stylesheet. Nothing else.
The following does not work for IE11 for me:
input::-ms-clear, input::-ms-reveal {
display: none;
}
Side-issue, probably not relevant: Whether I have it in or not I get the same thing, which I'm guessing is the way this works: the first time you go into password field you get the show/hide icon, change fields, go back in and the icon disappears.
any ideas how to get rid of the reveal because I have to remove it?
thanks.
adding !important to the rule fixed it. Something, somewhere must have overridden this, but there are no other -ms* entries in the imported style sheets and html (however this is tricky as it uses the truly awful GWT which seems to obfuscate and hide everything)....
input[type=text]::-ms-clear {
color: red; /* This sets the cross color as red. */
}
Context
Firefox 14 (and 13); specific CSS styles being ignored under certain conditions
The Problem
Using the following CSS:
*
{
outline:none;
-moz-outline:none;
-moz-user-focus:ignore;
}
JSFiddle
Firefox 14 (and 13) ignore these styles when using Tab to switch between select elements. Clicking these elements after using Tab still displays the outline.
Notes
Specifically styling select instead of * has no effect.
This only occurs with select elements.
The Question
Is this a bug or intended behavior?
Are there any other CSS styles that need to be used to prevent the outline from appearing indefinitely?
This is a known bug which has sparked several Stackoverflow discussions. From what I have read, Mozilla have deemed that CSS is the wrong place to handle this element behaviour, and have opted instead to handle it by other means. At this time the only solution is to either use tabindex="-1" or to set the element to display as something else, and restyle the look and feel of a droplist — but be warned, this opens a can of worms in itself.
If you do opt to do this, I have had success in the past with the following kludge:
select {
appearance: normal;
-webkit-appearance: none;
-moz-appearance: radio-container; /* renders text within select, without arrow chrome */
}
Appearance tells the browser to display the element as something else, but this is inconsistent from vendor to vendor. appearance: normal; is the spec, whilst webkit replaces normal with none. -moz-appearance: radio-container; has been the only way I have found to display the text within the chosen select option, whilst removing the arrow chrome for a fully customised droplist. However, try experimenting with the available options until you find something that works and doesn't add the focus ring you wish to customise. Internet Explorer will require further kludge to bend the select to your needs. Entirely possible, but out of scope for this question and answer.
So far the only way I've found to overcome it is to set the tabindex='-1' (see fiddle) which, of course, takes the element completely out of the tab selection chain. That would not be good for user interface, and my guess is not exactly what you desire (I assume you want to keep tab accessibility but just do your own styling for highlighting).
Another solution is to set outline: none and set a box-shadow. For example:
.my_elements:focus
{
outline: none;
box-shadow: 0 0 3px 0px red;
}
Use
*:-moz-focusring {
outline: 2px solid blue;
}
will give you similiar to chrome
Also, if using mac, you also need to enable this:
How to allow keyboard focus of links in Firefox?
Debugging experience http://www.dmhermitage.org/wtfborders.pngThis is making me want to kill myself.
I have some really simple CSS to style my input objects:
input, button
{
border: 1px solid #c66600;
background-color: white;
color: #7d212f;
font-family: "Eras Light ITC", Tahoma, sans;
}
But I don't like the ugly border it puts around radio buttons, so I use a selector to kill the border:
input[type=radio] { border: none; }
You can probably guess what browsers this works in and which ONE it does not work in. What's funny is when I press F12 to launch the excellent developer tools in IE8 it actually tells me that the style of the radio buttons has been overridden to 'none' just like I asked it to do, but the border remains on the radio button objects.
I have tried a variety of semantic things, like setting the border width to 0px or the color to something insane like lime green, but it remains the originally assigned color that it got from the first style.
And finally, I have tried only styling 'text' objects, in which case no style is applied to anything. Again, the browser claims to fulfill the CSS selection, but it visually does not happen.
Thoughts?
By the way, this is a DotNetNuke installation with generated code where I can't explicitly set the style of the radio buttons.
Thanks,
Dan
IE8 appears to be rendering in quirks mode instead of standards mode, which always messes everything up in IE. To switch to standards mode, the easiest way is to replace the doctype on the first line of the document with this:
<!DOCTYPE HTML>
You may also want to look at some of the HTML being output. You have a span with ID dnn_dnnMENU_ctldnnMENU that contains dozens of made-up attributes like BackColor, SysImgPath, MenuItemHeightand so on. These will have no effect in most browsers (maybe IE interprets them specially, I dunno).
problem is...
Being most helpful ever, please notice, that somehow, your page get's rendered in quirks mode, thus in some screwed way nobody should ever use.
solution [edit]
due to: http://dorward.me.uk/www/ie8/
set your html 4 doctype to:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Just in case, have you tried with:
input[type='radio'] { border: none; }
Notice the addition of the apostrophe (or whatever you call the ' in your funny language :P)
I looked at the site, your CSS is correct and there is nothing I can help you with. Good luck!
You can remove the border by setting an inline style attribute in the developer toolbar to border: none;... So for some reason the style isn't applied to the radio-button although the style is traced correctly. Seems like some sort of bug.. Have you tried jacking up the specificity of the rule (it should already be higher than input, but just to try it out)?
For instance:
#page input[type=radio] {
border: none;
}
It's not possible with CSS anymore (as far as I know), but using this Javascript here it will be possible for you; Styling checkboxes and radio buttons with CSS and Javascript.
Nasty. Try specifying the border colour to white?
I am creating a form which is validated under jQuery Validation. I want to apply a light-red background colour to inputs which are invalid and need to be corrected.
When I apply background-color: #FFCCCC; to the input, the attractive styling seems to be removed and a hard border replaces it. For example, with a text input in Firefox:
Styled and unstyled text input http://liranuna.com/strager/b/textbox-difference.png
(Live demo)
This occurs with several browsers. It also occurs if I set any background other than #FFFFFF.
Is there a way to preserve styling while applying a background colour?
I am open to Javascript solutions which emulate the style somehow.
Sorry - any sort of styling on input elements tends to destroy their OS/browser defaults. The default inputs are rendered in an entirely different way - it's not like they're coded into the browser as CSS styles, unfortunately.
The best thing to do here is, rather than try to make your red-background inputs emulate normal ones, create your own attractive styling! If you like those light borders, use border: 1px #ccc solid. If you like round corners, take advantage of border-radius and -moz-border-radius - for those who are on the edge of browser development, they'll have 'em. For those who aren't, they won't notice the difference.
In short, don't try to make the inputs fit in with the OS environment, but rather style them to your own site's look and feel. This will create better design for your website overall :)
I'd say the default (Windows 2000) look of the controls is easier to implement for the browser vendors. A browser has to draw everything itself, including any controls. That they look native in their default style is just a little convenience for the user but without something really fancy (and heavyweight) like WPF it quickly becomes unwieldly to draw the control correctly with visual styles of the OS and CSS applied.
The exact style is also dependent on the OS and therefore a solution giving you exactly one look might not be what most visitors of your site want. Then again, using only CSS you can achieve The One Look™. If that just happens to look like the native one on a specific OS, well, then so be it :-)
What you're looking for might probably be emulated a little by using a light-gray border and on hover/focus a light blue one, emulating the Aero look of Vista and Windows 7.
Here the browser is using its default styling.
I would suggest adding something like the following CSS to BOTH inputs, then they will look consistent.
border: solid 1px #ccc;
Short answer: no.
Browsers and form controls is without doubt the most inconsistent part of CSS. All I can suggest is to use a 1px border on input fields, as most browsers use something similar to this. CSS3 rounded corners should also work in a few browsers.
input.text {
border: 1px solid #ccc;
background-color: #fcc;
border-radius: 4px;
-moz-border-radius: 4px;
}
You will find this page at 456 Berea Street interesting. It showcases how each browser applies different styles on text boxes.
Check out what styles the normal input field is getting for border. And apply that to the error one also.
Change your HTML to be like this:
<p><input type="text" value="text" style="border:1px solid #999999;" /></p>
<p><input type="text" value="text" style="background-color: #FFDDDD;border:1px solid #999999;" /></p>
Edit: If you want it to look consistent across all browsers and not only slightly rounded in Mozilla then you'll have to do a lot more work. Here's a link that will show you how to completely override the textbox style.