I am using a styling for all the input fields but there is one field for which i do not want that style. Is there any way i can disable the css for that particular field and let it be for others.
You can add a css class to that element and use :not pseudo-class selector:
input:not(.notred) {
background: red;
}
<input name="text1">
<input name="text2">
<input name="text3">
<input class="notred" name="text4">
<input name="text5">
<input name="text6">
In CSS3, you can use ‘:not()’ to exclude an element using id or class.
add a class to that input which you want to disable, then in css
input:not(.that_class)
Let me know if you have any issue.
Related
I am working on an angular application and I am using mat form fields in it. For changing color of botttom border of mat form field I am using mat-form-field-ripple css which is inbuilt for mat form field. CSS is as follows.
.mat-form-field-ripple {
background-color: #f9c940!important;
}
When I use this CSS, it automatically gets applied to all form fields. I have to apply #f9c940 color in mat-form-filed-ripple in when one condition is true and a different color when another condition is true. My mat form field code is as follows:
<mat-form-field appearance="fill">
<mat-label [ngClass]="{}">Name</mat-label>
<input formControlName="Name" readonly>
</mat-form-field>
I was trying to do it using ngClass as shown above but not getting it. How can I do that?
ngClass doesn't work with <mat-form-field>. Use this syntax-
<mat-form-field [class.mat-form-field-invalid]="booleanVariable">
and in the .ts file, you can conditionally update the booleanVariable
You can apply classes conditionally like this:
<mat-label [ngClass]="{'your-class': foo=='foo', 'your-class-another':bar=='bar' }">
Name
</mat-label>
Just create your own CSS class:
.mat-form-field-ripple {
//your standard styling,
}
.myBackgroundColor {
background-color: #f9c940!important;
// add this selector below the .mat-form-field-ripple selector so that it will override..
}
Then apply it conditionally to your label:
<mat-form-field appearance="fill">
<mat-label [ngClass]="{'myBackgroundColor': mycheck}">Name</mat-label>
<input formControlName="Name" readonly>
</mat-form-field>
In your component you have the expression it is based on:
mycheck = true; // you will modify this true to any expression that is transformable to a boolean. If true, your class is applied, if false then not..
I need is an asterisk in the required fields
I have this code
.required label::after {
content: '*';
color: red;
}
in my html
<div class="required" >
<label for="entity"> entity </label>
<div>
<select id="entity">
<option value="">Entity</option>
</select>
</div>
</div>
This works well.
but I want to put it in a directive.
this is my directive
#Directive({
selector: '[lambRequired]',
host: {
'[style.after.content]': '"*"',
'[style.after.color]': '"red"',
},
})
export class RequiredDirective {
constructor() {
}
}
and in my html
<div >
<label lambRequired for="entity"> entity </label>
<div>
<select id="entity">
<option value="">Entity</option>
</select>
</div>
</div>
but this does not work anymore
help me I will be grateful.
Thank you
You cannot do this by using this approach since pseudo elements are not actually part of the DOM tree. As a consequence of that they are not exposed in any manner on the DOM API.
For you to be able to work with pseudo elements you would need to use a class / css like you were doing before.
But unless you were planning to have more functionality on the directive don’t see what kind of gain you would have to create a directive that would just change the color of the text and append an asterisk without any actual logic or event monitoring. A css class would be way more efficient for such a simple goal.
Let's say that I have two input fields and one of them in mandatory the other not.
They should function as standard placeholders, except the placeholder text of the mandatory field should be red, the other should be placeholder default and they should both look the same after some text us input.
How do I achieve that, using CSS?
You're probably helped by using the :required pseudo selector, possibly combining with the ::placeholder pseudo selector.
HTML:
<input type="text" id="name" name="name" placeholder="Your Name" required />
CSS:
input:required {
// CSS
}
input:required::placeholder {
// CSS
}
I am trying to style an element only when that element has a value attribute.
The value attribute is variable (it's a date), but it's the only thing that changes between "no value" and "has value" which I need to style differently.
Is it possible to use a wildcard in the CSS selector ascertain whether the value attribute is present? E.g:
HTML
<input class="thing" value="variable-something">...</input>
<input class="thing">...</input>
CSS
.thing[value="*"] {
...
}
OR
.thing[value=*] {
...
}
I've tried this solution but use of the " makes it look for a specific string. Doing .thing[value=*] is invalid and won't compile.
Any advice?
<input type="text" value="">
<input type="text">
input[value]{
background: #ccc;
}
Try it yourself https://jsfiddle.net/55rjf0y8/
You can use below code
input[value]{background: red;}
<input type="text">
<input type="text" value="">
I would like to change style of #postBtn, if #textfield is empty, something like
#postBtn:[#textfield.value.length==0]{
border-color:gray;
background-color:gray;
}
In html:
<input id='textfield'>
<input type="button" Value="Post" onClick="post()" id="postBtn">
How do I achieve this without javascript?
Thanks!
Ok, you can add required to your input field like so:
<input id='textfield' required>
<input type="button" Value="Post" onClick="post()" id="postBtn">
And then, using :invalid and the adjacent sibling selector (+), you can style the button if the field is empty like so:
#textfield:invalid + #postBtn {
background-color: red;
}
Here is a fiddle of it in action: http://jsfiddle.net/w7377/
Note: If the text input field is not actually a required field, then this solution is not the way to go. You may have to use a Javascript solution if that's the case.