I was going through https://angular.io/docs/ts/latest/guide/forms.html as exercise then I came through this piece of code:
.ng-valid[required], .ng-valid.required {
border-left: 5px solid #42A948; /* green */
}
.ng-invalid:not(form) {
border-left: 5px solid #a94442; /* red */
}
Why are both of .ng-valid[required], .ng-valid.required selectors used at the same time and cant we just replace this by only one of them?
The .ng-valid[required] rule is valid for
<input class="ng-valid" required>
The .ng-valid.required rule is valid for
<input class="ng-valid required">
Both rules are valid for
<input class="ng-valid required" required>
Now you can choose which solution you want to use and remove the not necessary rules on your CSS.
Related
This question already has answers here:
Reset Styles for input elements and restyling to bring back the default appearance
(2 answers)
Closed 5 years ago.
Is there a way to reset the border of an input to its default? Using initial is supposed to do just that but instead removes the border completely.
.textinputs {
border: 1px solid red;
}
#txtReset {
border: initial;
}
<input type="text" class="textinputs" value="hello" />
<input id="txtReset" class="textinputs" type="text" value="world" />
The textinputs class can't be removed as it's set through a server control (the inputs are server controls rendered with the class).
The answer here is outdated and no longer valid as we now have the initial keyword.
You can redefine css for world textbox like:-
#txtReset {
border:1px solid #ccc;
}
input[type='text'] {
border: 1px solid red;
}
#txtReset {
border:1px solid #ccc;
}
<input type="text" value="hello" />
<input id="txtReset" type="text" value="world" />
I found following CSS in https://angular.io/docs/ts/latest/guide/forms.html
.ng-valid[required], .ng-valid.required {
border-left: 5px solid #42A948; /* green */
}
.ng-invalid:not(form) {
border-left: 5px solid #a94442; /* red */
}
I have not seen .ng-valid[required] syntax before. I guess .ng-valid is a class. Is [required] some new CSS syntax?
With the CSS attribute selector *[required] you can format elements with the attribute required. The syntax isn't new. See the following example:
input[required] {
border:1px solid red;
}
<input type="text" required/>
<input type="text"/>
This is often used in <form>s to define some elements like <input> as required. With the CSS attribute selector *[required] you can format these required elements.
You can also use the :required pseudo-class to format the required elements:
input:required {
border:1px solid red;
}
<input type="text" required/>
<input type="text"/>
The :required CSS pseudo-class represents any <input> element that has the required attribute set on it. This allows forms to easily indicate which fields must have valid data before the form can be submitted.
source: https://developer.mozilla.org/en-US/docs/Web/CSS/:required
I have to bring red borders around the input element in chrome on HTML5 validation like as that of Firefox.
I have search it a lot but unable to find precise answer.
Any help of how to do it using css is greatly appreciated.
Thank you.
You use the :valid pseudo class.
To shamelessly copy the code from https://developer.mozilla.org/en-US/docs/Web/CSS/:valid:
input:invalid {
background-color: #ffdddd;
}
form:invalid {
border: 5px solid #ffdddd;
}
input:valid {
background-color: #ddffdd;
}
form:valid {
border: 5px solid #ddffdd;
}
input:required {
border-color: #800000;
border-width: 3px;
}
<form>
<label>Enter a URL:</label>
<input type="url" />
<br />
<br />
<label>Enter an email address:</label>
<input type="email" required/>
</form>
Try adding 'required' in the DOM element
<input name="heading" type="text" class="form-control" placeholder="heading" maxlength="35" required />
http://jsfiddle.net/gn3LL/
.error { background-color: red; }
<input id="firstname" class="custom error" name="first_name" type="text" placeholder="" class="input-xlarge">
There is a small but noticeable white border around the inside of the input box. How do I remove it?
Just user border:none
input {border:none;}
Or in your error class
.error { background-color: red; border:none;}
DEMO
border:0px;
or
border:0px solid #000;
The problem is you have two class attributes in a single element.
It is not valid based on w3.org's 8.2.4.35 Attribute name state.
... if there is already an attribute on the token with the exact same
name, then this is a parse error and the new attribute must be removed
from the token.
So you need to combine them like this -
<input id="firstname" class="custom error input-xlarge"
name="first_name" type="text" placeholder="" >
Back to original question
jsfiddle
.error { background-color: red; border: 0; }
OR
input[type="text"] { border: 0; }
OR (After you combine them into one)
.input-xlarge { border: 0; }
.error { background-color:red; border:0; }
I try to create login page contains username and password but i want rounded grouped inputs(username and password). I tried this:
border: none;
border-color: transparent;
using css, but still border is coming what might be error.
Solution 1
Working example: http://jsfiddle.net/Gajotres/95Paz/
CSS used:
.ui-input-text {
border: none !important;
border-color: transparent !important;
}
Solution 2
Working example: http://jsfiddle.net/Gajotres/95Paz/1/
HTML
<div id="wrapper">
<input type="text" style="border:none" autocorrect="off" autocapitalize="off" name="username" id="username" placeholder="Username or Email" />
<input type="password" style='border-radius:5px;' id="password" placeholder="Password" />
</div>
CSS
#wrapper .ui-input-text {
border: none;
border-color: transparent;
}
More info
When working with jQuery Mobile you need to understand that final HTML content is enhanced and it don't look like previous one. Also when overrding classes !important must be used. Read more about it here.
When using jQuery Mobile, you need to disable its auto-enhanced as follow
HTML
<input type='text' data-role='none'>
CSS
input, input:hover, input:focus, input:active {
background: transparent;
border: 0;
border-style: none;
border-color: transparent;
outline: none;
outline-offset: 0;
box-shadow: none;
}