INPUT Field - Blue Focus Highlight ? Impossible to get rid of? - javascript

I have tried EVERYTHING to get rid of this focus blue highlight and absolutely nothing seems to work.
I have tried:
input:focus {
outline: none;
}
which I've read on here is the correct solution. It's not working though. Using the latest Chrome / Safari / Firefox the blue highlight is still there when clicking into focus.
It works in IE7 / IE8 funnily enough. I tried a javascript solution I read on stack as well where I add an onclick:blur method to the input, but this just made the input field uneditable?
Any solutions guys? Would prefer a clean CSS solution if possible.

That bit of css would only work if there's nothing more specific. Remember, css goes by the most specific rule taking precedence, so saying
input#myid:focus { /* <--more specific, takes priority */
outline: blue;
}
input:focus { /* <--less specific, overridden by above */
outline: none;
}
You can force the override with !important, though that can lead to other problems later on:
input:focus {
outline: none !important;
}
Use Firebug to view the computed CSS for the element when it's hovered. It'll tell you where the rule(s) applied to element are coming from.

I was having the same problem and this worked for me
#search input[type="text"]:focus {
width: 180px;
outline: none;
}

Related

Trouble with <input> styling and autofill

I am building a login modal and would like to use input tags to enable browsers to autocomplete username and password however I am struggling to fully reset the User Agent Stylesheet styling for input tags. Whenever autocomplete does its thing the old styling comes back.
Here's my (simplified) react login form:
<form id="login-popup-container">
<div className="login-field-container">
<div className="login-value-title user">email</div>
<input className="answer login-info" type="text" />
</div>
<div className="login-field-container">
<div className="login-value-title password">password</div>
<input className="answer login-info" type="password" />
</div>
</form>
I have added this in my index.css:
input, input:focus, input:active, input:hover, input:-webkit-autofill, input:autofill, input:indeterminate, input:enabled, input:valid {
outline: none !important;
border:none !important;
background-image:none !important;
background-color:transparent !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
It works in a chrome incognito browser well enough
But in a regular chrome tab when autofill is performed by chrome this action brings the User Agent Stylesheet styling back to the input elements like this. As you can see above I have tried adding all the pseudo classes I could think of to the input tag reset styling but with no success.
Has anybody experienced this issue before / know why this is happening?
You can't override UA styles with !important
The user agent style sheets of many browsers use !important in their :-webkit-autofill style declarations, making them non-overrideable by webpages without resorting to JavaScript hacks.
https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill
Also, more efficiently reset every single style on your inputs with the CSS all property!
input {
all: unset;
}
You can use these global values:
initial - set all properties to property default defined by CSS
unset - if normally inherited: inherit, if not: initial
revert - set all properties to default for element defined by UA
For anybody experiencing this issue... the answer to my question turned out to be a combination of Zach Jensz's answer and adding a transition delay to <input> elements. It's definitely more of a hack than an answer, but for me it works.
My css reset looks like this:
input {
all: unset;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
transition: all 5000s ease-in-out 0s;
}
and my styling for inputs looks like this:
.classname-used-for-my-inputs {
background: transparent;
background-color: transparent;
color: white;
border: none;
}
The reason the delay hack is necessary is because even after unsetting all the styles, upon an autocomplete of the email/password event the User Agent styles kept coming back (I could not figure out how to prevent this). But at least now the delay time is so long that for all practical purposes no one will ever notice them and so for my purposes it works.
If somebody explains why / proposes a non hacky solution I will update this.
Also for styled-components, you could only apply it in your global.styles folder
input {
all: unset;
}

after selecting date how to remove X mark(clear button) in html 5 [input type="date"]

I know this may seems duplicate question but I still not get clear idea about the clear button in firefox and up/down arrows in chrome. It occupies more space in my table. I want to remove those functions. I really don't know is there any function in javascript or in CSS
I tried this:
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
display: none;
-webkit-appearance: none;
}
but, still getting the same X mark.
In Chrome you can use
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-clear-button { display: none; }
Firefox, on the other hand, doesn't have support for this.
You'd probably be better off using a 3rd party jQuery plugin.

Why do Angular UI buttons have a different focus border in Chrome than they do in IE?

Can anyone tell me why button focus borders are rendered with a black dashed border by default in IE11 and with a blue solid border in Chrome? You can see this if you go to http://angular-ui.github.io/ and tab over the Site/Code buttons with IE11 and Chrome.
I've tried various overrides like -webkit-appearance:none etc to no avail. Is this an AngularUI bug, or a browser quirk everybody knows about and have been working around that I'll need to special-case if I want the look to be uniform?
When you tab over the button, you are applying the element's :focus styling. Looking at the stylesheet which is being used, I cannot see any custom styling for this, so the browser is providing it's default focus styling.
If you want to override this, then you can write your own focus style. So for this particular button, you can use:
a.btn.btn-primary.btn-large:focus{
outline: 0;
/* add other styling to it */
}
Or if you want to just target all anchors on the page, then use
a:focus{
outline: 0;
}
Angular is adding the dotted lines on this occasion - to remove, do this in your CSS;
.btn-group > .btn:hover, .btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active {
outline: 0;
}

How do I remove the number spinner in Chrome on input[type=number] [duplicate]

I have a site which is primarily for mobile users but desktop too.
On Mobile Safari, using <input type="number"> works great because it brings up the numerical keyboard on input fields which should only contain numbers.
In Chrome and Safari however, using number inputs displays spin buttons at the right side of the field, which looks like crap in my design. I really don't need the buttons, because they are useless when you need to write something like a 6-digit number anyway.
Is it possible to disable this with -webkit-appearance or some other CSS trick? I have tried without much luck.
I discovered that there is a second portion of the answer to this.
The first portion helped me, but I still had a space to the right of my type=number input. I had zeroed out the margin on the input, but apparently I had to zero out the margin on the spinner as well.
This fixed it:
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
The below css works for both Chrome and Firefox
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance:textfield;
}
Not sure if this is the best way to do it, but this makes the spinners disappear on Chrome 8.0.552.5 dev:
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
}
It seems impossible to prevent spinners from appearing in Opera. As a temporary workaround, you can make room for the spinners.
As far as I can tell, the following CSS adds just enough padding, only in Opera:
noindex:-o-prefocus,
input[type=number] {
padding-right: 1.2em;
}
Another solution to avoid the browser default spinner for the number type by changing
type into text
inputmode into numeric and
number only pattern "[0-9]*"
<input type="text" inputmode="numeric" pattern="[0-9]*" />
Unlike 'number' type, the above solution still allows the user to enter non-number characters in the input box but you can avoid invalid submission by listening to the oninvalid event.
You can also hide spinner with following trick :
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
opacity:0;
pointer-events:none;
}

Disable grey border on anchor (<a>) elements on focus

I am trying to make the ugly grey border that appears around anchor tags go away. The CSS property outline:none; works for Firefox, but how can I do it in IE? Preferably using CSS expressions or jQuery. I'm not worried about accessibility BTW.
Based on your suggestions I found these to be the best solutions:
The jQuery (for IE browsers):
$('a').focus(function() {
$(this).blur();
});
Another jQuery option (for IE browsers only):
$('a').focus(function() {
$(this).attr("hideFocus", "hidefocus");
});
The CSS (for all other browsers that force an outline):
a {
outline: none;
}
Note: Some browsers such as Google Chrome don't force an outline on focus.
Unfortunately I think hideFocus is your best answer as blur isn't always appropriate:
...
http://msdn.microsoft.com/en-us/library/ms533783(VS.85).aspx
It sounds like you're talking about the dotted border that appears when you tab through links. You have the correct solution for Firefox (outline: none in the CSS). The best solution I've used for IE is to add an onfocus listener that removes focus:
link
Take a look at this site for an example of how you might do it globally: http://codylindley.com/Javascript/223/hiding-the-browsers-focus-borders-should-i-shouldnt-i
Unless I'm missing which dotted border is being discussed, outline:none works in Internet Explorer 8 (at least, for me). Rather all of a sudden some hyperlinks were rendering with a dotted border (the only attribute I remember changing is display:inline on an h2 element that contained a link, afterwards the dotted border appeared). So I threw in a { outline:none; } in my global stylesheet and poof, no more border in IE8!
For IE, you can use Javascript like this:
Click Here
Read more:
http://www.htmlgoodies.com/beyond/javascript/article.php/3471171
For Firefox and Safari, outline:none works.
Read more:
http://css-tricks.com/removing-the-dotted-outline/
Does this not work?
a
{
border: 0;
}
a {outline:noneIE 8} css seems to work well on Firefox, Chrome and IE 8.
a {
outline: 0 none !important;
border: none;
}

Categories

Resources