I have 2 basic forms: sign in and sign up, both on the same page. Now, I have no problem with the sign in form auto-filling, but the sign up form auto fills as well, and I don't like it.
Also, the form styles get a yellow background which I can't manage to override and I don't want to use inline CSS to do so. What can I do to make them stop being colored yellow and (possibly) auto filling?
Trick it with a "strong" inside shadow:
input:-webkit-autofill {
-webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
-webkit-text-fill-color: #333;
}
input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 50px white inset;/*your box-shadow*/
-webkit-text-fill-color: #333;
}
for the autocompletion, you can use:
<form autocomplete="off">
regarding the coloring-problem:
from your screenshot i can see that webkit generates the following style:
input:-webkit-autofill {
background-color: #FAFFBD !important;
}
1) as #id-styles are even more important than .class styles, the following may work:
#inputId:-webkit-autofill {
background-color: white !important;
}
2) if that won't work, you can try to set the style via javascript programmatically
$("input[type='text']").bind('focus', function() {
$(this).css('background-color', 'white');
});
3) if that won't work, you're doomed :-) consider this:
this wont hide the yellow color, but will make the text readable again.
input:-webkit-autofill {
color: #2a2a2a !important;
}
4) a css/javascript solution:
css:
input:focus {
background-position: 0 0;
}
and the following javascript has to be run onload:
function loadPage()
{
if (document.login)//if the form login exists, focus:
{
document.login.name.focus();//the username input
document.login.pass.focus();//the password input
document.login.login.focus();//the login button (submitbutton)
}
}
eg:
<body onload="loadPage();">
good luck :-)
5) If none of the above work try removing the input elements, cloning them, then placing the cloned elements back on the page (works on Safari 6.0.3):
<script>
function loadPage(){
var e = document.getElementById('id_email');
var ep = e.parentNode;
ep.removeChild(e);
var e2 = e.cloneNode();
ep.appendChild(e2);
var p = document.getElementById('id_password');
var pp = p.parentNode;
pp.removeChild(p);
var p2 = p.cloneNode();
pp.appendChild(p2);
}
document.body.onload = loadPage;
</script>
6) From here:
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
$(window).load(function(){
$('input:-webkit-autofill').each(function(){
var text = $(this).val();
var name = $(this).attr('name');
$(this).after(this.outerHTML).remove();
$('input[name=' + name + ']').val(text);
});
});
}
Add this CSS rule, and yellow background color will disapear. :)
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
After 2 hours of searching it seems Google Chrome still overrides the yellow color somehow, but I found the fix. It will work for hover, focus etc. as well. All you have to do is to add !important to it.
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0px 1000px white inset !important;
}
this will completely remove yellow color from input fields
This seems to be working for me:
input {
-webkit-background-clip: text !important;
}
<form autocomplete="off">
Pretty much all modern browsers will respect that.
Sometimes autocomplete on the browser still autocompletes when you just have the code in the <form> element.
I tried putting it in the <input> element as well and it worked better.
<form autocomplete="off"> AND <input autocomplete="off">
Support for this attribute however is ceasing, please read
https://bugzilla.mozilla.org/show_bug.cgi?id=956906#c1
https://bugzilla.mozilla.org/show_bug.cgi?id=956906
Another work around that I've found is taking out placeholders inside of the input fields that suggest that it is an email, username, or phone field (ie. "Your Email", "Email", etc.")
This makes it so that browsers don't know what kind of field it is, thus doesn't try to autocomplete it.
You can also change the name attribute of your form elements to be something generated so that the browser won't keep track of it. HOWEVER firefox 2.x+ and google chrome seems to not have much problems with that if the request url is identical. Try basically adding a salt request param and a salt field name for the sign-up form.
However I think autocomplete="off" is still top solution :)
You can disable auto-completion as of HTML5 (via autocomplete="off"), but you CAN'T override the browser's highlighting. You could try messing with ::selection in CSS (most browsers require a vendor prefix for that to work), but that probably won't help you either.
Unless the browser vendor specifically implemented a vendor-specific way of overriding it, you can't do anything about such styles that are already intended to override the site's stylesheet for the user. These are usually applied after your stylesheets are applied and ignore ! important overrides, too.
This fixes the problem on both Safari and Chrome
if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){
window.setInterval(function(){
$('input:-webkit-autofill').each(function(){
var clone = $(this).clone(true, true);
$(this).after(clone).remove();
});
}, 20);
}
I was able to remove the autofill color with this approach:
// Workaround to remove autofill color from inputs
input, select {
color: #fff !important;
-webkit-text-fill-color: #fff !important;
-webkit-background-clip: text !important;
background-clip: text !important;
}
This is working for Safari and Chrome on iOS and Chrome on android, as far as I have tested.
The accepted answer might have been a good answer for specific cases, but I was using angular material with transparent backgrounds and on top of that the <input> field was not the 'entre material field' with the fancy borders etc.
I made this modified solution, that just forces a very long transition on any of the autofill pseudo-elements, so that the change in properties is not even noticeable unless the user manages to stay on the same page for a considerable amount of the 1000000000 or so seconds that I have set it to!
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
transition: all 10000000s;
}
The form element has an autocomplete attribute that you can set to off. As of the CSS the !important directive after a property keeps it from being overriden:
background-color: white !important;
Only IE6 doesn't understand it.
If I misunderstood you, there's also the outline property that you could find useful.
If it's in input field you're trying to "un-yellow" ...
Set a background-color with css... let's say #ccc (light gray).
Add value="sometext", which temporary fills the field with "sometext"
(optional) Add a little javascript to make the "sometext" clear when you go to put the real text in.
So, it might look like this:
<input id="login" style="background-color: #ccc;" value="username"
onblur="if(this.value=='') this.value='username';"
onfocus="if(this.value=='username') this.value='';" />
Lets use a little css hack:
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
input:-internal-autofill-selected {
-webkit-text-fill-color: #000;
background: #fff !important;
box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0%), inset 0 0 0 100px #fff;
}
The screenshot you linked to says that WebKit is using the selector input:-webkit-autofill for those elements. Have you tried putting this in your CSS?
input:-webkit-autofill {
background-color: white !important;
}
If that doesn't work, then nothing probably will. Those fields are highlighted to alert the user that they have been autofilled with private information (such as the user's home address) and it could be argued that allowing a page to hide that is allowing a security risk.
I've seen Google toolbar's autocomplete feature disabled with javascript. It might work with some other autofill tools; I don't know if it'll help with browsers built in autocomplete.
<script type="text/javascript"><!--
if(window.attachEvent)
window.attachEvent("onload",setListeners);
function setListeners(){
inputList = document.getElementsByTagName("INPUT");
for(i=0;i<inputList.length;i++){
inputList[i].attachEvent("onpropertychange",restoreStyles);
inputList[i].style.backgroundColor = "";
}
selectList = document.getElementsByTagName("SELECT");
for(i=0;i<selectList.length;i++){
selectList[i].attachEvent("onpropertychange",restoreStyles);
selectList[i].style.backgroundColor = "";
}
}
function restoreStyles(){
if(event.srcElement.style.backgroundColor != "")
event.srcElement.style.backgroundColor = "";
}//-->
</script>
After trying a lot of things, I found working solutions that nuked the autofilled fields and replaced them with duplicated. Not to loose attached events, i came up with another (a bit lengthy) solution.
At each "input" event it swiftly attaches "change" events to all involved inputs. It tests if they have been autofilled. If yes, then dispatch a new text event that will trick the browser to think that the value has been changed by the user, thus allowing to remove the yellow background.
var initialFocusedElement = null
, $inputs = $('input[type="text"]');
var removeAutofillStyle = function() {
if($(this).is(':-webkit-autofill')) {
var val = this.value;
// Remove change event, we won't need it until next "input" event.
$(this).off('change');
// Dispatch a text event on the input field to trick the browser
this.focus();
event = document.createEvent('TextEvent');
event.initTextEvent('textInput', true, true, window, '*');
this.dispatchEvent(event);
// Now the value has an asterisk appended, so restore it to the original
this.value = val;
// Always turn focus back to the element that received
// input that caused autofill
initialFocusedElement.focus();
}
};
var onChange = function() {
// Testing if element has been autofilled doesn't
// work directly on change event.
var self = this;
setTimeout(function() {
removeAutofillStyle.call(self);
}, 1);
};
$inputs.on('input', function() {
if(this === document.activeElement) {
initialFocusedElement = this;
// Autofilling will cause "change" event to be
// fired, so look for it
$inputs.on('change', onChange);
}
});
Simple javascript solution for all browser:
setTimeout(function() {
$(".parent input").each(function(){
parent = $(this).parents(".parent");
$(this).clone().appendTo(parent);
$(this).attr("id","").attr("name","").hide();
});
}, 300 );
Clone input, reset attribute and hide original input.
Timeout is needed for iPad
Since the browser searches for password type fields, another workaround is to include a hidden field at the beginning of your form:
<!-- unused field to stop browsers from overriding form style -->
<input type='password' style = 'display:none' />
I've read so many threads and try so many pieces of code.
After gathering all that stuff, the only way I found to cleanly empty the login and password fields and reset their background to white was the following :
$(window).load(function() {
setTimeout(function() {
$('input:-webkit-autofill')
.val('')
.css('-webkit-box-shadow', '0 0 0px 1000px white inset')
.attr('readonly', true)
.removeAttr('readonly')
;
}, 50);
});
Feel free to comment, I'm opened to all enhancements if you find some.
Autocomplete off is not supported by modern browsers. The easiest way to solve autocomplete I found was a little track with HTML and JS.
The first thing to do is change the type of the input in HTML from 'password' to 'text'.
<input class="input input-xxl input-watery" type="text" name="password"/>
Autocomplete starts after window loaded. That's OK. But when the type of your field is not 'password', browser didn`t know what fields it must complete. So, there will be no autocomplete on form fields.
After that, bind event focusin to password field, for ex. in Backbone:
'focusin input[name=password]': 'onInputPasswordFocusIn',
In onInputPasswordFocusIn, just change the type of your field to password, by simple check:
if (e.currentTarget.value === '') {
$(e.currentTarget).attr('type', 'password');
}
That`s it!
UPD: this thing doesn't work with disabled JavaSciprt
UPD in 2018. Also found some funny trick. Set readonly attribute to the input field, and remove it on the focus event. First prevent browser from autofilling fields, second will allow to input data.
Please try with autocomplete="none" in your input tag
This works for me
I had to also change the text color to something darker (see StackOverflow dark theme colors).
So ended up with a hybrid of #Tamás Pap, #MCBL and #don's solution:
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0px 1000px #2d2d2d inset !important;
-webkit-text-stroke-color: #e7e8eb !important;
-webkit-text-fill-color: #e7e8eb !important;
}
You can style autofilled inputs using :-webkit-autofill
Even in firefox with the webkit-prefix!
To change the background color, there is the box-shadow trick.
And for Firefox you need additionally filter:none.
:-webkit-autofill {
filter:none; /* needed for firefox! */
box-shadow: 0 0 0 100px rgba(38, 163, 48, 0.212) inset;
}
Just sharing this great solution from wahmal for anyone who wants a transparent background for their input. Bypass all the annoying webkit default styling by adding a long delay to the transition from your default input styling to the webkit styling for autofill.
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-transition-delay: 9999s;
transition-delay: 9999s;
}
Why not just put this in your css:
input --webkit-autocomplete {
color: inherit;
background: inherit;
border: inherit;
}
That should take care of your issue. Although it does raise a usability issue because now the user can't see that the form was autofilled in the way he/she is used to.
[edit] After posting this I saw that a similar answer was already given and that you commented on it that it didn't work. I don't quite see why because it did work when I tested it.
The REAL problem here is that Webkit (Safari, Chrome, ...) has a bug. When there's more than one [form] on the page, each with an [input type="text" name="foo" ...] (i.e. with the same value for the attribute 'name'), then when the user returns to the page the autofill will be done in the input field of the FIRST [form] on the page, not in the [form] that was sent. The second time, the NEXT [form] will be autofilled, and so on. Only [form] with an input text field with the SAME name will be affected.
This should be reported to the Webkit developers.
Opera autofills the right [form].
Firefox and IE doesn't autofill.
So, I say again: this is a bug in Webkit.
Related
How to edit the tabs separately, I want to place the background image on tab 1 different from tab 2.
QWidget::tab {
border-image: url(:/Tabs/tab_notclick.png);
min-width:96px;
min-height:18px;
}
QWidget::tab2 {
borrder-image: url(:/Tabs/tab2_notclick.png);
min-width:96px;
min-height:18px;
}
QWidget::tab:selected{
border-image: url(:/Tabs/tab_click.png);
}
This might not fix it but in the tab2 part of the stylesheet border is spelt borrder, which would end up making that part of the stylesheet not work as expected.
This:
borrder-image: url(:/Tabs/tab2_notclick.png);
Needs to be this:
border-image: url(:/Tabs/tab2_notclick.png);
Please let me know if this fixes the problem or not.
I designed a site so that changing two user inputted colors should change the color scheme of the entire site.
What is the best way to accomplish this. I know that I would have to save the items in the database and pull every time the user logged in in order to implement the color scheme with every login.
But at the moment I am more worried about a live change as soon as the user changes the html color value.
I know of an option to where I add a CSS class to every component that would change such as ... .primaryColor and .secondaryColor. And then alter all of the elements with that class. Is there a better way with React or another CSS/Javascript solution?
Also another complication is that it would have to be in a way that when the user loads other components that have not rendered yet, the change is still in affect.
One possible solution is to use the <style> element coupled with dangerouslySetInnerHTML, like this. (Notice the backticks ` around the CSS - it's an interpolated string literal.)
const Theme = props => {
<style dangerouslySetInnerHTML={{__html: `
.styled { color: ${props.userColor} }
`}}
/>
}
Then a component that used the theme would simply be <div className="styled" />
I got the idea for this solution here.
If you use this method, be very careful you're using sanitized variables to create your CSS theme. Otherwise, there's potential problems with injection attacks.
I would use an event listener on the input, read the value, and if it matches whatever you want to trigger the color scheme change, apply the theme value to a data attribute on a root element and use CSS to control the color schemes.
var input = document.getElementById('input'),
body = document.getElementsByTagName('body')[0];
input.addEventListener('keyup',function() {
var val = this.value;
if (this.value == 'foo') {
body.setAttribute('data-theme','secondary');
} else if (this.value == 'bar') {
body.setAttribute('data-theme','primary');
} else {
body.setAttribute('data-theme','');
}
// ajax request to save theme pref in db
})
/* defaults */
body {
color: #333;
}
/* primary theme */
[data-theme="primary"] {
color: red;
}
[data-theme="primary"] p {
background: yellow;
}
/* secondary theme */
[data-theme="secondary"] {
color: blue;
}
[data-theme="secondary"] ul {
background: grey;
}
<input id="input" placeholder="enter 'foo' or 'bar'">
<p>
paragraph
</p>
<ul>
<li>list</li>
</ul>
you can easily do this using js.
just add your class .primaryColor, .secondaryColor with jQuery addClass() Method.
select the element
example :
$(selector).addClass(classname,function(index,currentclass))
more example :https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_addclass
I am using a simple ASP.NET linkbutton control.
<asp:LinkButton ID="LinkButtonDelete" runat="server" CssClass="linkButtonDelete">Delete</asp:LinkButton>
I am styling this button with the following css definitions:
.linkButtonDelete:link
{
background: transparent url(/../images/btnRegular.png) no-repeat scroll 0 0 !important;
}
.linkButtonDelete:hover
{
background: transparent url(/../images/btnHighlight.png) no-repeat scroll 0 0 !important;
}
And here is the problem: If I disable the linkbutton (LinkButtonDelete.Enabled = false;) and then hover over the linkbutton, the background image shows btnHighlight.png (instead of btnRegular.png). I tested this in IE9 and Chrome. Same effect.
Is there any chance I can apply a "disabled" style with CSS only (please no Javascript!)?
Thanks
I'm keeping my other answer because it would work as well, but if you want a purely CSS solution, look into Attribute Selectors which are supported starting with CSS 2.1. Assuming ASP.NET sets the disabled attribute, you could add something like so:
.linkButtonDelete[disabled="disabled"]:hover
{
background: something else;
}
It sounds like it's acting exactly as you tell it to. It's showing the hover. If you don't want it to show the hover, when you are disabling the button, it sounds like you need to set the Class to something else and create a new class that doesn't have the hover.
LinkButtonDelete.Enabled = false;
//then
LinkButtonDelete.Attributes["class"] = "linkButtonDeleteDisabled"; // give it a new class
or
LinkButtonDelete.CssClass = "linkButtonDeleteDisabled";
Is there a way that I can select a textarea such that $('#id_of_textarea').val() in jQuery will be ''? I tried using :empty. I saw that CSS provides a way to select empty inputs because the text is in the value attribute ([value=""]). Is there an attribute for the text in a textarea?
I'm looking for a selector that will work with CSS, not just jQuery.
Best solution I can think of is a CSS 3 workaround. Set the field to required (and unset it on submit if need be). Then you can use
textarea:invalid { /* style here... probably want to remove box-shadow and such */ }
this works in recent browsers except edge (at the moment):
textarea:placeholder-shown {
/* this should be active only when area is empty and placeholder shown */
}
so with jQuery for example you can pick all empty textareas:
$('textarea:placeholder-shown').val()
https://developer.mozilla.org/en/docs/Web/CSS/:placeholder-shown
If you're using React, then this is the solution:
textarea:not(:empty) {
// Apply css here
}
For instance,
/* Apply style when textarea contains text */
textarea:not(:empty) {
border: 6px solid blue;
padding: 6px;
}
Working demo:
Textarea - Select empty textarea using CSS
Note: While this works perfectly in React (because of re-painting caused by state update), It does not provide the same response if implemented using Vanilla HTML + CSS.
This works fine, as with input:
<textarea name="comment" id="comment" class="authority_body-input" data-val="{$form.comment}" onkeyup="this.setAttribute('data-val', this.value);">
textarea.authority_body-input:not([data-val=""]):not(:focus) {
color: red;
}
You can use the :empty css pseudo-class.
See an example in jsfiddle.
In the example there is a button for dynamically add new empty textareas to the DOM, so you can see that the new elements also are affected with the pseudo-class.
The code in the example was tested in Firefox 5.0, Opera 11.50 and Chromium 12.
Also, you can see a good description for the :empty pseudo-class here.
For those who are using AngularJS, you can use ng-class in your view to add a class to your textarea to know if it is empty or not.
HTML :
<textarea ng-model="myForm.myTextArea"
ng-class="(myForm.myTextArea.length)?'not_empty':'empty'">
</textarea>
CSS :
textarea.empty {
background-color:red;
}
textarea.not_empty {
background-color:blue;
}
Here is a jsfiddle.
I have a jQuery UI Button that I am trying to style using CSS. Basically all I want is a dark-green background, and a light-green hover color. I noticed that for whatever reason, specifying the desired styles in my CSS file didn't work, so I added some code to apply them programmatically when the button is created:
//initialize the jQuery button with the correct styles
$( "button", ".buttonContainer" ).button();
//add a class that we can apply our styles to (jQuery likes to override styles applied to .ui-button)
$(".buttonContainer .ui-button").addClass("greenButton");
//override button styles (doesn't work when done through stylesheet)
$(".greenButton").css("background", "none !important");
$(".greenButton").css("background-color", "#006600 !important");
$(".greenButton").css("border", "1px solid darkGray !important");
//mouseover handler to change the background color (same reason as above)
$(".greenButton").hover(function() {
//mouse-over handler
$(this).css("background-color", "green !important");
}, function() {
//mouse-out handler
$(this).css("background-color", "#006600 !important");
});
This works fine in Chrome, IE, and Safari, but for some reason Firefox continues showing the default gray button styles (no scripting errors are reported). Interestingly, if I open the web-developer CSS editor, the button gets the correct styles instantly. I have the following in my CSS from back before I realized that the styles would only take if applied programmatically:
.greenButton {
background-color: #006600 ! important;
}
.greenButton:hover {
background-color: green ! important;
}
Anyways, what I see in Firefox by default looks like this:
...when it should look like this (as seen in any other browser):
Any ideas?
In your CSS you are only setting the background-color attribute, while jQuery UI buttons are built with background image, which covers the color. You were correct to set 'background:none' via JS, but adding it to the element's style multiple times via css() messes things up a bit - just inspect the style attribute of your button when active in, e.g. FireBug. It might well be that you hit a minor bug in FireFox. It works for me. In any case, here is working jsFiddle
CSS:
.greenButton {
background: #006600 none ! important;
}
.greenButtonHover {
background: #009900 none ! important;
}
HTML:
<button>Should be green on hover</button>
JS:
$("button").button();
$("button").addClass("greenButton");
$(".greenButton").hover(function() {
$(this).addClass('greenButtonHover');
}, function() {
$(this).removeClass('greenButtonHover');
});