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
Related
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
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>
We have a a interactive filter on our company website, used to show people based on department, without wanting to spend more money on a developer who has access to the templates, we can make CSS changes via wordpress.
Can hide the filters themselves at the moment as they seem to be contained within a style called : #Filters_Department
Label appears like this but other labels on the page we don't want to hide.
<label>Department:</label>
This Works for part of it.
#filters_department
{
display:none
}
Have tried:
label[for="department"]
{
display:none;
}
I think you just have to add the for attribute to your label.
<label for="department">Department : </label>
Why don't you try adding a class to the label and targeting it that way?
<label class="hidden">Hidden label</label>
.hidden { display: none;}
This selector works with attributes
[attribute="value"] - looks for attribute that is matching exactly with the "value"
[attribute^="value"] - looks for attribute that starts with the "value"
[attribute*="value"] - looks for attribute that includes "value" somewhere in it
In your case you don't have any attributes. Add
class="..." or id="..." or custom data-attr="..."
If you use class or id attributes, better use the .value {} or #value {} selector.
But note that these selectors have different importance than the attribute selectors, it is good to know when overwriting.
See the example below
label {
display: block;
}
label[data-attr="dept-1"] {
display: none;
}
label[class="someClass"] {
color: blue;
font-size: 21px;
}
.someClass {
color: red;
font-size: 16px;
}
/* class selector can't overwrite the attribute selector */
#someId {
color: red;
}
/* id selector can overwrite the attribute and the class selector*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<label class="someClass" data-attr="dept-1">Department: 1</label>
<label class="someClass" data-attr="dept-2">Department: 2</label>
<label class="someClass" data-attr="dept-3" id="someId" >Department: 3</label>
</body>
</html>
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.
I have an HTML div tag as belows:
<div id="cookiemsgbox" class="blue" style="display: block;">
This consists of few links and span tags. All of them appear in blue color because of class=blue; property.
Now instead of putting it in the html tag I wish to use the class property in the css.
I have written it as belows:
#cookiemsgbox {
class: blue; }
Also tried :
#cookiemsgbox {
class: #364395; }
But this does not works.
The links and span elemnets appear gray(colorless).
Where am I going wrong ?
Please help.
Thanks :)
In your CSS use color: blue;. To understand CSS selectors refer https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors
#cookiemsgbox
{
color: blue;
}
Explaination:
# selects id attribute
. selects class attribute.
#cookiemsgbox selects the element with id="cookiemsgbox".
.blue selects all elements with class="blue"
try this
.blue
{
color : blue;
}
OR
#cookiemsgbox
{
color : blue;
}