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.
Related
UPDATE 2: Question no longer relevant since it can't be solved with a MWE offline example. (I also found the offending piece of code which was responsible for the bug.
I have a small thin border when hovering over the header element which looks suspiciously like a text-decoration border and I can't get rid of it.
To my knowledge this problem can't be solved with text-decoration: none;… it just won't work or I applied it at the wrong element… then again, I think I've test them all… which Is why I am posting my question here.
text-decoration: "none" http://oho.xyz/hover1.jpg
The MWE works fine (http://codepen.io/pattulus/pen/bNRxaz), but the real thing isn't.
Since I don't know exactly where the problem is with my code, I have a live example running at . I debugged it with the web inspector for the last hours but can't pin-point what's off here. I placed an text-decoration: none !important almost everywhere without success.
So they real question is: What is this bug and how to find it?
Update: I dropped the faux-border added with an pseudo ::before element to the span to avoid confusion. I'll add it later when this problem is solved. I also made the html more semantic using this:
I have checked out the live version of your site, and if you disable the content: css property of your ::before css, the line disappears.
It's bad markup practice to have your a href wrapped around your two h1 tags. re-write like this:
<h1>Some title<span>sub title text</span></h1>
change your css to reflect the new html changes and you will be able to control the behavior better.
In my example I had a mixing which I called globally to underline all a tags:
#mixin hoverbottom($width: 2px, $style: solid, $color: $orangey-red) {
&:hover {
#include transition($link-transition);
border-bottom: $width $style $color;
}
}
Since the mixin isn't written in a smart way, I couldn't simply say border-bottom: none, but needed to #include hoverbottom (0px, solid, transparent);. I will rewrite it to work more smoothly. But… this was the culprit.
Thanks everybody for taking the time.
I have some thoughts on my head that involves changing the background-color of some text input fields I have. I went ahead to see if they'd look as I hoped, and this is what I saw:
First one being truly plain, second one being with the CSS styling background-color: #FFFFFF; and the last one has background-color: #FEFEFE; which you can experience yourself there: JSFiddle
It seems to be that browsers are dismissing all their pre-set styles for the input elements, as soon as I change this style property. Internet Explorer 11 even gives up on the blue glow which is normally present when a text input field is hovered (should also be on blur).
Is it possible for me to change just the background colour without causing all that?
I probably will just thoroughly style the text input fields anyway, I'm asking it out of curiosity.
I did some research about this, its something that makes me wonder what its the real behavior, unfortunately, I couldn't find any explanation to this, so I can only assume, that once you style an input, the appearance of the same, its reset to a default value, ignoring the native styles that the browser is giving to the element.
I think you probably know this already, because of your last comment, but just in case, this will help you keep the blur effect on the inputs, and at the same time, it will make them render in the same way for different browsers, you can also add height to that, to keep it even more consistent.
input
{
border:solid 1px #CCC;
background-color:#FFFFFF;
}
input:focus
{
box-shadow:0 0 3px 0 blue;
outline:none;
border:solid 1px #CCC;
}
I hope this helps!
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?
I have a problem with a site I am redesigning and the problem is specifically with ie7.
if you look at dev.indigoniche.com (this usually redirects you back to the main site because of some cookie thing so after that happens just go back to the dev site) you will see in the top right the login module. The background of the head section changes between 5 designs on page load. Because the designs are so busy and conflicting colourwise, I need to highlight the text in the login module, which I have done fine in non ie browsers with the use of the following code
text-shadow:0 0 5px #000000, -1px -1px 5px #000000;
In ie7 you can use the following filter
filter: glow(color=#000000,strength=3);
so I have this in a conditional ie7.css file as so
.......
#form-login-password, #form-login-username, .custom_loginmodule form input, #forgot_password_text a, #register_text a, .custom_loginmodule a:visited, .custom_loginmodule a:link, .custom_loginmodule a:hover{
filter: glow(color=#000000,strength=3);
}
#modlgn_username{
filter: glow(color=#000000,strength=0);
}
.......
You can see in ie7 that this glow works fine on the login button and the username and password fields but it just wont apply to the 'register' or 'forgot password' text, possibly due to them being links.
I can't for the life of me work out why it wont work on the links. Any ideas?
Additionally the login, register and forgot password should have a hover state and the text boxes themselves don't need the glow which I haven't been able to turn off.
Thanks for looking and I hope you can help me.
Thanks
Luke
An element needs layout. Maybe your anchors don't have layout? Try applying..
zoom:1; to whatever element(s) it doesn't work on.
I eventually solved this for ie7... after MUCH mucking around. I used a .glow class and applied it directly to the links... it was quite frustrating..
However...
I then went to work on ie8... and eventually I conceeded that ie8 just does not support either of the following
filter: glow(color=#000000,strength=3);
-ms-filter:"progid:DXImageTransform.Microsoft.glow(color=#000000,strength=3)";
when it comes to links. It seemed to work on other elements just not links. I even did testing outside of the site to confirm there was nothign else conflicting.
My end solution was to change the links to buttons and style them all how I wanted. The css styles mentioned above work ok on buttons so I have got the effect I wanted.
Hope this helps someone in the future.
Snarfles
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; }