I apply css in form it should apply when my form is invalid .I also write important but nothing happen .In other words I make a dynamic form from json ,Now I need to validate that form .so I apply css which is not working.why I am apply css because some one suggest that in this how to validate form using $pristine and $dirty in angular? you please why it is not apply
here is my plunker
http://plnkr.co/edit/ECLvOstUxq5tIDrYicF2?p=preview
/* Styles go here */
.ng-invalid {
border :1px solid red !important;
}
.ng-pristine {
border :1px solid blue !important;
}
.ng-pristine {
border :1px solid blue !important;
}
Updated plunker
http://plnkr.co/edit/ECLvOstUxq5tIDrYicF2?p=preview
I press login button nothing happen
You need to update your css into this
input.ng-invalid {
border :1px solid red !important;
}
the class ng-invalid applies to the form as well since it AngularJS detects that the form is invalid so it applies the class to the form.
Edit
It seem that you are using a third party module for your forms. It has it's own validation styles so we have to use it. Here are some notes:
I added the novalidate directive to your formly directive. This will prevent the browser to trigger its default validation, the browser's default validation will not trigger the ng-submit function if it finds an error.
I added an ng-class="{'form-submitted':submitted}" to the form directive itself. (This is similar to the approach of PatrickEvans' answer
In relation to Item 2, I modified the CSS to this. The red border will be applied if the form-submitted class is applied to the parent form.
.form-submitted input.ng-invalid {
border :1px solid red !important;
}
See Plunkr
You have invalid style values: 1 px solid red !important you have a space between the number and px which makes it invalid so it does not render that style.
If using Chrome, you can look at an elements applied styles and if there is a warning symbol next to the style (and has a line through it) it means it is an invalid value. Not sure what the other browsers Developer Tools looks like for this but this is what Chrome's looks like:
As for making the css only apply after hitting the login button you will need to setup a check. You can do this by using the ng-class directive
css
.ng-invalid.apply {
border :1px solid red !important;
}
html
<input type="email" ng-class="{apply:loginAttempted}" />
<button type="submit" ng-click="loginAttempted=true" />
the ng-class will apply the style apply to the element when loginAttempted is a truthy value. So when the element gets the ng-invalid and the apply classes then the border will be rendered.
Related
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;
}
I have a bootstrap (v4.5.3) form, where my selects look like this in firefox:
When someone tries to submit the form, I have some JS code that runs, and does validation. One of the things it checks for is that someone actually chose an option, and didn't leave it on -- Select an Option --. When I detect this, my javascript would stop form submission, and highlight the option by setting the border to red:
ELEMENT.style.borderColor = "red";
Unfortunately, when I do that, my select loses whatever styling bootstrap put on it, and looks like this:
I left the bottom one untouched for easy comparison.
Am I highlighting it wrong? Is there some css class I'm supposed to use instead of changing the borderColor?
Edit: See https://jsfiddle.net/xbqucoLp/ for example
Bootstrap actually comes with validation CSS built in. The style of the select in bootstrap is different to what you have in your question so it may not be to your liking. It does however keep the select arrow consistent unlike what you currently have.
See https://getbootstrap.com/docs/5.0/forms/validation/ for details
Here is a working fiddle: https://jsfiddle.net/0gqL7641/1/
The advantage of using this is that when you choose an option it changes from red to green.
If the above is unacceptable to you, then the following will work:
You can use outline instead of border and this doesn't change the styling of select
this.style.outline = "solid 1px red";
Another way of changing the outline without touching border is to use shadow
.redOutline {
-webkit-box-shadow: 0px 0px 3px 3px rgba(255,0,0,0.5);
box-shadow: 0px 0px 3px 3px rgba(255,0,0,0.5);
}
and use the following to add the outline
this.classList.add("redOutline");
You can tweak the shadow CSS using this tool https://html-css-js.com/css/generator/box-shadow/
Have you tried adding a class to the element instead?
like this
element.classList.add("mystyle");
that might work as long as the only thing that class contains is a border color with !important
Ah I didn't realize there was a difference sorry. Usually for these custom selects, there are classes that overlay the browser select to get custom features. I would see if you can target those classes and change their border color. Looking for the elements in the browser dev-tools allows you to change their css in the browser to test if you can do that to see what element you need to target.
For whatever odd reason, Angular does not blur out the clicked element, so I 'fixed' it like this:
*:focus { outline: none !important; }
It's not a real fix, instead every element should be blurred automatically, but I'm not sure how to do that without a directive, so this must do for now, unless someone has a better solution.
However, I can't seem to apply the same 'fix' for Bootstrap custom checkboxes.
<label class="c-input c-checkbox">
<input type="checkbox">
<span class="c-indicator"></span>
Remember Me
</label>
This is how it looks like when focused:
I tried removing outline, border, box-shadow - nothing seemed to work.
It's not a problem coming from your libraries, but your custom css. You have to be missing something, but this code should work.
Place it at the end of your custom css file.
.c-input .c-indicator {
border: none !important;
outline: none !important
}
I've added a red border to my input boxes on error generated during form validation
<input id="cardnumber" />
The border is set to red in my javascript using:
$(cardnumber).css({ "border":' solid #ff0000'})
Now I would like to clear the solid border when the user resolves the error:
I tried:
$(cardnumber).css({"outline":'none'})
$(cardnumber).css({"outline":'0'})
None of of the above works.
Whats the correct css to reset the border?
Set the border to none:
$(cardnumber).css({"border-color":'black'});
But rather than changing CSS explicitly, it's generally better to use classes and put the styles in your CSS file.
Try border: none;
Outline is not the same as border
Keep the value of the border css before the error in a variable and reapply after:
$borderbefore = document.getElementById('cardnumber').style.border;
...
//error
$(cardnumber).css({ "border":' solid #ff0000'})
...
//correction
document.getElementById('cardnumber').style.border = $borderbefore;
I'm trying to change the background color of a div with a checkbox in it. I've made this for reference. I'm trying to replace the parent <div> with the 'highlight' <div>, so I thought the toggle <div> would work. When the checkbox is deselected, I would like the background color to go back to normal (or remove the 'highlight' <div>). Any help is appreciated.
You are setting an inline background-color style for the divs. This takes precedence over any properties you set via a CSS rule.
Add !important to the background-color value of the checked class in your css file, like so: http://jsfiddle.net/KtsGs/1/
There are a few issues present in the jsFiddle.
The first one is that, despite having written jQuery code, you haven't selected jQuery as the framework on the left hand side. That's a small issue specific to the code on jsFiddle, and easily fixed, though.
The second issue is that you have inline styles on the <div> elements, including a background-color. That inline style will be used in preference to any background-color specified using a CSS class (unless it's specified as being !important), so even when your code correctly adds the checked class to the element, the background colour isn't going to change.
The simplest solution is to simply change your CSS declaration:
.checked {
background-color: #ff0000 !important;
}
Here is an updated version of your jsFiddle with the working functionality (using the suggestion above).
However, I'd suggest you instead move the inline styles and JavaScript event handlers to their own CSS declarations, so you don't have to specify !important. That would require the following changes:
#holder > div {
clear: both;
padding: 0.5%;
margin-bottom: 1px;
border-bottom: 1px solid #eee;
float: left;
width: 96%;
style: height: 16px;
cursor: pointer;
background-color: white; // added this to the existing CSS
}
#holder > div:hover { // this is new
background-color: #fafafa;
}
Then move the CSS declaration for .checked below those, so that it takes precedence for the background-color property.
Here is another updated version of your jsFiddle, using the CSS declarations instead.