I have an input that has a FormControl and I want it to work with :invalid i.e.
scss
input:invalid {
background-color: red;
}
html
<input type="text" [formControl]="NameCtrl">
but it is not working with it. Although it is working with required i.e.
input:invalid {
background-color: red;
}
<input type="text" required>
How to decorate input field with error styles with FormControl. Any idea, solution, or workaround would be highly appreciated.
Invalid pseudo selector works only for basic HTML validation, for example.
I enter 'hello' as the value for an input field with type as email then only invalid will work.
more details here for invalid pseudo selector
When dealing with angular :invalid is pretty useless, instead use the classes inserted by angular form validations, as shown below!
input.ng-invalid.ng-touched {
border: 1px solid red;
}
forked stackblitz
Related
I want to know I can I do like the below picture from google sign up form
I want to add "#myemail" in the right of input,and I know maybe I can use the structure like this:
<div>
<input>
<div>
<div>
<span>
<div>
and merge the two div in one line,but when I had done this,my border color can't match bwtween two div
especically I have shadow css in my code,there will be a line between two div,so I am really confused how to match two border color and shadow perfectly
Try using the one below. Just create a wrapper and style the wrapper with a border. Add an input with no border and outline also a span at the end.
If you want to add some border or some style when the user focus on the input you can make use of :focus-within pseudo-class. This will matches an element if the element or any of its descendants are focused. Reference
.input-container {
width: 250px;
display: flex;
border: 2px solid #a9a9a9;
justify-content: space-between;
}
.input-container input:focus,
.input-container input:active {
outline: none;
}
.input-container input {
border: none;
width: 100%;
}
.input-container:focus-within {
border: 2px solid rgb(114 76 252);
}
<div class="input-container">
<input type="text" class="input-field" />
<span>#gmail.com</span>
</div>
You can also use a placeholder attribute and style it
possible example
input[type="email"]::placeholder{text-align:right}
<input type="email" placeholder="#mail.com">
https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder
The ::placeholder CSS pseudo-element represents the placeholder text in an <input> or <textarea> element.
you can do it by floating the text of input to right
input[type='text']{
text-align:right;
}
input[type='text']:focus{
text-align:left;
}
Not sure what do you mean tho. But I don't think placing a line of text floating to the right like that has any practical purpose beside asthetic purpose. If you want example of email, use placeholder. For pre-filled value so users can type less: use value attribute. If you want user use exact email provider, says #gmail and not #yahoo, use form validation.
<input type="email" value="#gmail.com">
I've been using Bootstrap's vue form-group in order to create input fields.
I'm trying to apply certain CSS on the 'legend' Element for the following code:
<fieldset id="__BVID__59" class="form-group" required="required">
<legend class="col-form-label pt-0">Login</legend>
<div tabindex="-1" role="group">
<input type="text" class="form-control">
<!----><!----><!---->
</div>
</fieldset>
My goal is to add required asterisks to the labels, therefore my suggestion would be:
.form-group[required] legend::after {
content: '*';
color: red;
}
but my CSS doesn't seem to recognise the legend element, no matter what I do or how I write it.
it's the same if I use label instead of legend.
I've tried also using nth-child(0) of fieldset (the parent) but it seems like it's just ignoring this child and nothing really happens. I thought it has something to do with the CSS configurations of the bootstrap i'm using, but also using !important doesn't seem to do anything.
any help would be highly appreciated.
In Vue if you use a scoped style tag <style scoped> you wont be able to select subcomponents by default. To do so you need to use a deep selector
<style scoped>
.form-group[required] ::v-deep legend::after {
content: '*';
color: red;
}
</style>
Without scoped your css should work as expected, but i don't recommend doing so as it can mess with other components and be messy to debug.
<style>
.form-group[required] legend::after {
content: '*';
color: red;
}
</style>
How i can select and style an <input type=checkbox disabled checked> in SASS?
I tried this but don't put any style:
input {
&:checked &:disabled{
background-color:red;
}
}
Here is the code you can try.
input {
&:checked:disabled{
background-color:red;
}
}
However the styles won't work for checkbox. As checkbox can not be styled natively yet. See for reference css - Why Cannot Change Checkbox Color Whatever I Do?
If I have a selector defined for input:show_invalid
<style>
input:show_invalid {
background-color: red;
}
</style>
When I reference it in this HTML, the input does not show as red:
<html>
<input type='text' class='input:show_invalid'/>
</html>
In the CSS code, classes are marked by a ., not a : at the beginning. In the HTML code, you just write the class name into the class atrribute - without the dot or anything else.
so your code has to be
input.show_invalid {
background-color: red;
}
<input type='text' class='show_invalid'/>
There's a few things wrong with your code.
You're using a non-existing pseudo-class, show_invalid. You probably meant to use the invalid pseudo-class.
You are targeting all <input> elements (not a class) with a pseudo-class show_invalid with your CSS selector but adding the entire string input:show_invalid as a class in your html.
You either wanted to use the invalid pseudo-class:
input:invalid {
background-color: red;
}
<input type='email'/>
or to target a class:
input.show_invalid {
background-color: red;
}
<input type='text' class='show_invalid'/>
Try
<input type='text' class='show_invalid'/>
You're already in an element
A class selector should precede with a period eg. specify a simple class show and access the css as
.show {
background-color: red;
}
OR
if you want the styling to be same, then replace the class name to
class='show_invalid'
Hope it helps
Let say I have following class into my general.css. this css has been applied on default.aspx.
In general.css there is class checkbox{ .... }
on default.aspx I have one checkbox with
<input type='checkbox' />
so when page loads class checkbox applied on my checkbox. I want to prevent to apply checkbox class on this
checkbox. condition is I can't change general.css also I can't remove reference of general.css from default.aspx.
only can do with input tag.
checkbox is not a class,
.checkbox is a class, notice the dot in front of "checkbox"
to limit the CSS styling to a specific element, you can use ID.
<input type='checkbox' id='checkboxWithStyle'/>
in the CSS:
#checkboxWithStyle{
background-color:red;
}
Let's say you have css as follows:
input[type='checkbox'] {
border: 2px solid red;
}
Add another class:
input[type='checkbox'].notdefault {
border: none;
}
Then change your input:
<input type="checkbox" class="notdefault" />
The new class can be in another css file or embedded in the aspx page.