I've two divs, suppose the first one is edit-text-field-12, and other is of the form edit-text-field-12-23. And these numbers changes, I would like apply different css for divs. Is it possible to do in CSS.
I want to apply background color red for all the div following the pattern edit-text-field-12 and background color blue for the divs with the pattern edit-text-field-12-23.
Is it possible?
<input type="checkbox" id="edit-text-field-12" value="12">
<input type="checkbox" id="edit-text-field-12-23" value="12-23">
<input type="checkbox" id="edit-text-field-12-46" value="12-46">
<input type="checkbox" id="edit-text-field-12-39" value="12-39">
<input type="checkbox" id="edit-text-field-17" value="17">
<input type="checkbox" id="edit-text-field-17-21" value="17-21">
<input type="checkbox" id="edit-text-field-17-34" value="17-34">
There are inputs of type check boxes. On change of another field this list is populated. The checkbox with the pattern edit-text-field-* are parents, and the checkbox with the pattern 'edit-text-field--' are child elements. I want to show it in 2 different backgrounds.
SOLUTION AT BOTTOM
Assuming these are ids, you can select them all like so:
[id^="edit-text-field-"] {
/* YOUR CSS */
}
This would select edit-text-field-11, edit-text-field-12, edit-text-field-12-23 etc.
To be more specific with this partial selector, you could add the 12 to the end etc, eg.
[id^="edit-text-field-12"] {
/* YOUR CSS */
}
This would select edit-text-field-12, edit-text-field-12-23, but not edit-text-field-11.
For the individual ids, the syntax is as follows:
#edit-text-field-12 {
/* YOUR CSS */
}
For further reading, see W3Schools CSS Selectors, which explains all the possible CSS selectors available to you.
In response to the question edit:
#edit-text-field-12 {
/* YOUR CSS for the first bit */
}
[id^="edit-text-field-12-"] {
/* YOUR CSS for the other bits */
}
Replace the 12 with 17 for the second set etc.
You can't select the parts with 12 being any number, as there is no wildcard value in CSS (eg. edit-text-field-*-), so you'll have to repeat the above, you can use commas so you don't repeat the styles.
#edit-text-field-12,
#edit-text-field-17 {
/* YOUR CSS for the first bit */
}
[id^="edit-text-field-12-"],
[id^="edit-text-field-17-"] {
/* YOUR CSS for the other bits */
}
A solution for this, as the inputs have values, is to use the values to detect which type they are.
Doing this, you could select everything like so:
[id^="edit-text-field-"]:not([value*="-"]) {
/* YOUR CSS for the first bit */
background: #f44336;
}
[id^="edit-text-field-"][value*="-"] {
/* YOUR CSS for the other bits */
background: #1976d2;
}
you an use a partial selector as below.
div[class^="edit-text-field-"] {
}
EDIT: Jquery Solution
Since you didnt mention clearly on if you are trying to change the background color of the div or the input element, I assume you want to wrap each of the input in a div and color them.
Below is the sample snippet.
Key points.
1. I have used filter() on all the inputs to filter out only the single digit id's and double digit id's using regex
^edit-text-field-\d+$ -> makes sure it selects id's like edit-text-field-12, edit-text-field-17
^edit-text-field-\d+-\d+$ -> makes sure it selects id's like edit-text-field-12-23, edit-text-field-17-21 etc.
2. Once the elements are filtered I am wrapping them using wrap with a div and appropriate class name to get the background color.
Hope this is helpful.
var singleNumberPatternElements = [];
var doubleNumberPatternElements = [];
$('input').filter(function(){
return this.id.match(/^edit-text-field-\d+$/g);
}).wrap('<div class="singleNumber"/>');
$('input').filter(function(){
return this.id.match(/^edit-text-field-\d+-\d+$/g);
}).wrap('<div class="doubleNumber"/>');
.singleNumber{
background-color:blue;
}
.doubleNumber{
background-color:Red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="edit-text-field-12" value="12">
<input type="checkbox" id="edit-text-field-12-23" value="12-23">
<input type="checkbox" id="edit-text-field-12-46" value="12-46">
<input type="checkbox" id="edit-text-field-12-39" value="12-39">
<input type="checkbox" id="edit-text-field-17" value="17">
<input type="checkbox" id="edit-text-field-17-21" value="17-21">
<input type="checkbox" id="edit-text-field-17-34" value="17-34">
Use a CSS3 partial selector
div[class^="edit-text-field-"]{
width:100%;
background-color: blue;
}
<div class="edit-text-field-12">abc</div>
<div class="edit-text-field-12-23">def</div>
Related
Is it possible to use a CSS selector to target an input that has a specific value?
Example: How can I target the input below based on the value="United States"
<input type="text" value="United States" />
Dynamic Values (oh no! D;)
As npup explains in his answer, a simple css rule will only target the attribute value which means that this doesn't cover the actual value of the html node.
JAVASCRIPT TO THE RESCUE!
Ugly workaround: http://jsfiddle.net/QmvHL/
Original Answer
Yes it's very possible, using css attribute selectors you can reference input's by their value in this sort of fashion:
input[value="United States"] { color: #F90; }
• jsFiddle example
from the reference
[att] Match when the element sets the "att" attribute, whatever the
value of the attribute.
[att=val] Match when the element's "att"
attribute value is exactly "val".
[att~=val] Represents an element
with the att attribute whose value is a white space-separated list of
words, one of which is exactly "val". If "val" contains white space,
it will never represent anything (since the words are separated by
spaces). If "val" is the empty string, it will never represent
anything either.
[att|=val] Represents an element with the att
attribute, its value either being exactly "val" or beginning with
"val" immediately followed by "-" (U+002D). This is primarily intended
to allow language subcode matches (e.g., the hreflang attribute on the
a element in HTML) as described in BCP 47 ([BCP47]) or its successor.
For lang (or xml:lang) language subcode matching, please see the :lang
pseudo-class.
css attribute selectors reference
It is possible, if you're using a browser which supports the CSS :valid pseudo-class and the pattern validation attribute on inputs -- which includes most modern browsers except IE9.
For instance, to change the text of an input from black to green when the correct answer is entered:
input {
color: black;
}
input:valid {
color: green;
}
<p>Which country has fifty states?</p>
<input type="text" pattern="^United States$">
Yes, but note: since the attribute selector (of course) targets the element's attribute, not the DOM node's value property (elem.value), it will not update while the form field is being updated.
Otherwise (with some trickery) I think it could have been used to make a CSS-only substitute for the "placeholder" attribute/functionality. Maybe that's what the OP was after? :)
As mentioned before, you need more than a css selector because it doesn't access the stored value of the node, so javascript is definitely needed. Heres another possible solution:
<style>
input:not([value=""]){
border:2px solid red;
}
</style>
<input type="text" onkeyup="this.setAttribute('value', this.value);"/>
Sure, try:
input[value="United States"]{ color: red; }
jsFiddle example.
You can use Css3 attribute selector or attribute value selector.
/This will make all input whose value is defined to red/
input[value]{
color:red;
}
/This will make conditional selection depending on input value/
input[value="United States"]{
color:red;
}
There are other attribute selector like attribute contains value selector,
input[value="United S"]{
color: red;
}
This will still make any input with United state as red text.
Than we attribute value starts with selector
input[value^='united']{
color: red;
}
Any input text starts with 'united' will have font color red
And the last one is attribute value ends with selector
input[value$='States']{
color:red;
}
Any input value ends with 'States' will have font color red
Refreshing attribute on events is a better approach than scanning value every tenth of a second...
http://jsfiddle.net/yqdcsqzz/3/
inputElement.onchange = function()
{
this.setAttribute('value', this.value);
};
inputElement.onkeyup = function()
{
this.setAttribute('value', this.value);
};
In Chrome 72 (2019-02-09) I've discovered that the :in-range attribute is applied to empty date inputs, for some reason!
So this works for me: (I added the :not([max]):not([min]) selectors to avoid breaking date inputs that do have a range applied to them:
input[type=date]:not([max]):not([min]):in-range {
color: blue;
}
Screenshot:
Here's a runnable sample:
window.addEventListener( 'DOMContentLoaded', onLoad );
function onLoad() {
document.getElementById( 'date4' ).value = "2019-02-09";
document.getElementById( 'date5' ).value = null;
}
label {
display: block;
margin: 1em;
}
input[type=date]:not([max]):not([min]):in-range {
color: blue;
}
<label>
<input type="date" id="date1" />
Without HTML value=""
</label>
<label>
<input type="date" id="date2" value="2019-02-09" />
With HTML value=""
</label>
<label>
<input type="date" id="date3" />
Without HTML value="" but modified by user
</label>
<label>
<input type="date" id="date4" />
Without HTML value="" but set by script
</label>
<label>
<input type="date" id="date5" value="2019-02-09" />
With HTML value="" but cleared by script
</label>
Following the currently top voted answer, I've found using a dataset / data attribute works well.
//Javascript
const input1 = document.querySelector("#input1");
input1.value = "0.00";
input1.dataset.value = input1.value;
//dataset.value will set "data-value" on the input1 HTML element
//and will be used by CSS targetting the dataset attribute
document.querySelectorAll("input").forEach((input) => {
input.addEventListener("input", function() {
this.dataset.value = this.value;
console.log(this);
})
})
/*CSS*/
input[data-value="0.00"] {
color: red;
}
<!--HTML-->
<div>
<p>Input1 is programmatically set by JavaScript:</p>
<label for="input1">Input 1:</label>
<input id="input1" value="undefined" data-value="undefined">
</div>
<br>
<div>
<p>Try typing 0.00 inside input2:</p>
<label for="input2">Input 2:</label>
<input id="input2" value="undefined" data-value="undefined">
</div>
I have the following style set for labels of a particular form:
#incidentForm label {
font-weight:bold;
width:40%;
vertical-align:top;
}
Which is exactly what I want for my full page form. But for the modal that allows one to update a single field from a report where someone would view the data results, I would like the label for the TEXTAREA ONLY to NOT be limited to the "width:40%". All other input types should keep the "width:40%".
I've been trying to wrap my brain around how to either do a :NOT exception to the existing label style, or somehow set a separate style based on the class of the modal. I.E.:
.updateModal label(that somehow identifies only textareas) {
width:100%;
}
Here is an example of the structure of the update modal itself:
<div id="Return" class="updateModal">
<div id="incidentForm">
<div class="[name of this incident form type]">
<form class="AjaxForm" action="https://blahblahblah" method="post">
<fieldset id="fs1">
<legend>Edit report field</legend>
<div class="field">
<label for="31">This is the label for this text area field:</label>
<textarea id="31" name="31"></textarea>
</div>
</fieldset>
<input value="Update record" type="submit">
</form>
</div>
</div>
</div>
Please note that the id for the textarea and, thus the label for it, are generated dynamically based on the id field of the database the form information is pulled from. All of the field information is stored in a db so I would not be able to generate a specific style definition based on the id of the specific textarea itself. Or at least not that I can think of.
Does anyone have any suggestions?
Thank you very much!
The selector should be like
label[for=xxx]
{
/* ...definitions here... */
}
For multiple, you can make your selector simpler and generalize for modern browsers:
label[for^="3"] {
color: red; //It will apply to all label that starts with "3"
}
Or Simply you can write:
label[for="31"],label[for="32"],label[for="and so on.."] {
color: red;
}
Or For General Label Simply write
label {
color: red; //It will affect to all the label in the page
}
With CSS, the subject of the selector is the last compound selector of the entire selector (https://www.w3.org/TR/selectors4/#subject). In CSS4, there is a new subject selector that will allow this. It looks like: label! + textarea. The ! means that the label selector is the subject of this selector.
Unfortunately, this is not yet implemented in any browsers (http://css4-selectors.com/selector/css4/subject-of-selector-with-child-combinator/). Given that, we only have the ability to look for descendants, children, and younger siblings.
If you have some ability to control your HTML, this gives us a possibility: if we flip the DOM order of the form element and label, then the label becomes the younger sibling of the textarea. This gives us the option of using the adjacent + selector. The visual ordering can be altered by using a reverse-column flexbox. Consider:
<div class="field">
<textarea id="f1">My textarea</textarea>
<label for="f1">My Label</label>
</div>
<div class="field">
<input type="text">
<label for="f1">My Label</label>
</div>
.field {
display: flex;
flex-direction: column-reverse;
margin: 1em;
}
textarea + label {
background: #faa;
}
Demo: https://codepen.io/honzie/pen/weMRam
To summarize: (1) Is it possible in CSS2.1/3? Not with the current HTML. (2) Is it possible with CSS4 (assuming browsers implement it and the spec doesn't change)? Yes, in the future.
Although I don't have any code to work with, if provide some I'll try to include it, it seems to me you should be able to add a CSS class to any label that is being used for a textarea. If backend code is using database info to decide on the element to use for a form field then you can use that logic to add the class, otherwise add it yourself when you write the HTML.
You can use the following to select and attribute of an element:
input[type="text"] {
background-color: yellow;
}
Is it possible to use a CSS selector to target an input that has a specific value?
Example: How can I target the input below based on the value="United States"
<input type="text" value="United States" />
Dynamic Values (oh no! D;)
As npup explains in his answer, a simple css rule will only target the attribute value which means that this doesn't cover the actual value of the html node.
JAVASCRIPT TO THE RESCUE!
Ugly workaround: http://jsfiddle.net/QmvHL/
Original Answer
Yes it's very possible, using css attribute selectors you can reference input's by their value in this sort of fashion:
input[value="United States"] { color: #F90; }
• jsFiddle example
from the reference
[att] Match when the element sets the "att" attribute, whatever the
value of the attribute.
[att=val] Match when the element's "att"
attribute value is exactly "val".
[att~=val] Represents an element
with the att attribute whose value is a white space-separated list of
words, one of which is exactly "val". If "val" contains white space,
it will never represent anything (since the words are separated by
spaces). If "val" is the empty string, it will never represent
anything either.
[att|=val] Represents an element with the att
attribute, its value either being exactly "val" or beginning with
"val" immediately followed by "-" (U+002D). This is primarily intended
to allow language subcode matches (e.g., the hreflang attribute on the
a element in HTML) as described in BCP 47 ([BCP47]) or its successor.
For lang (or xml:lang) language subcode matching, please see the :lang
pseudo-class.
css attribute selectors reference
It is possible, if you're using a browser which supports the CSS :valid pseudo-class and the pattern validation attribute on inputs -- which includes most modern browsers except IE9.
For instance, to change the text of an input from black to green when the correct answer is entered:
input {
color: black;
}
input:valid {
color: green;
}
<p>Which country has fifty states?</p>
<input type="text" pattern="^United States$">
Yes, but note: since the attribute selector (of course) targets the element's attribute, not the DOM node's value property (elem.value), it will not update while the form field is being updated.
Otherwise (with some trickery) I think it could have been used to make a CSS-only substitute for the "placeholder" attribute/functionality. Maybe that's what the OP was after? :)
As mentioned before, you need more than a css selector because it doesn't access the stored value of the node, so javascript is definitely needed. Heres another possible solution:
<style>
input:not([value=""]){
border:2px solid red;
}
</style>
<input type="text" onkeyup="this.setAttribute('value', this.value);"/>
Sure, try:
input[value="United States"]{ color: red; }
jsFiddle example.
You can use Css3 attribute selector or attribute value selector.
/This will make all input whose value is defined to red/
input[value]{
color:red;
}
/This will make conditional selection depending on input value/
input[value="United States"]{
color:red;
}
There are other attribute selector like attribute contains value selector,
input[value="United S"]{
color: red;
}
This will still make any input with United state as red text.
Than we attribute value starts with selector
input[value^='united']{
color: red;
}
Any input text starts with 'united' will have font color red
And the last one is attribute value ends with selector
input[value$='States']{
color:red;
}
Any input value ends with 'States' will have font color red
Refreshing attribute on events is a better approach than scanning value every tenth of a second...
http://jsfiddle.net/yqdcsqzz/3/
inputElement.onchange = function()
{
this.setAttribute('value', this.value);
};
inputElement.onkeyup = function()
{
this.setAttribute('value', this.value);
};
In Chrome 72 (2019-02-09) I've discovered that the :in-range attribute is applied to empty date inputs, for some reason!
So this works for me: (I added the :not([max]):not([min]) selectors to avoid breaking date inputs that do have a range applied to them:
input[type=date]:not([max]):not([min]):in-range {
color: blue;
}
Screenshot:
Here's a runnable sample:
window.addEventListener( 'DOMContentLoaded', onLoad );
function onLoad() {
document.getElementById( 'date4' ).value = "2019-02-09";
document.getElementById( 'date5' ).value = null;
}
label {
display: block;
margin: 1em;
}
input[type=date]:not([max]):not([min]):in-range {
color: blue;
}
<label>
<input type="date" id="date1" />
Without HTML value=""
</label>
<label>
<input type="date" id="date2" value="2019-02-09" />
With HTML value=""
</label>
<label>
<input type="date" id="date3" />
Without HTML value="" but modified by user
</label>
<label>
<input type="date" id="date4" />
Without HTML value="" but set by script
</label>
<label>
<input type="date" id="date5" value="2019-02-09" />
With HTML value="" but cleared by script
</label>
Following the currently top voted answer, I've found using a dataset / data attribute works well.
//Javascript
const input1 = document.querySelector("#input1");
input1.value = "0.00";
input1.dataset.value = input1.value;
//dataset.value will set "data-value" on the input1 HTML element
//and will be used by CSS targetting the dataset attribute
document.querySelectorAll("input").forEach((input) => {
input.addEventListener("input", function() {
this.dataset.value = this.value;
console.log(this);
})
})
/*CSS*/
input[data-value="0.00"] {
color: red;
}
<!--HTML-->
<div>
<p>Input1 is programmatically set by JavaScript:</p>
<label for="input1">Input 1:</label>
<input id="input1" value="undefined" data-value="undefined">
</div>
<br>
<div>
<p>Try typing 0.00 inside input2:</p>
<label for="input2">Input 2:</label>
<input id="input2" value="undefined" data-value="undefined">
</div>
I would like to apply a special style to all inputs in my form that are required and empty at that.
It does work when i write in my css
input[required='required'] {
bla-bla-bla;
}
but it doesn't work, when i write
input[value=''] {
bla-bla-bla;
}
I know i can do that using jQuery, but i would like to do that in pure css, if it is possible.
Can that be done?
Thank you in advance,
Timofey.
If you don't have to support older IE versions, you can set the placeholder attribute on your input to something (can be whitespace, but must be something) and use :placeholder-shown to target that input.
<input type="text" class="custom-input" placeholder=" ">
.custom-input:placeholder-shown {
/* Your rules */
}
You can use the Pseudo-Selecot :invalid for this - it will match an input only when the browser-validation fails for the element. If you set the element required it will be invalid as long as it is empty.
And all moder browsers support this CSS-class: Browser Compatibility
input:invalid {
border-color: red;
}
<input type="text" required>
Searched css style empty inputs and found the following:
Matching an empty input box using CSS
You need to use JavaScript.
To use the CSS style, you would have to type in the attribute: value='' in your HTML, but then the CSS would match regardless of if the value changes mid-session.
Try this
<input type="text" value="">
input:not([value=""]) {
/* Your code */
}
I'm trying to have some file inputs, and have them only show up if the previous one has been filled. This can use css 3 as well.
An example worth thousands words: Display X input, one at a time
The idea is simple, if an input set as required is empty, it's invalid. From there, all you have to do is set all input as required and use the :invalid pseudo class. Should work great with label too.
input:invalid~input:invalid {
display: none;
}
<input type="file" required>
<input type="file" required>
<input type="file" required>
To expand on Yi Jiang's comment, selectors against the "value" attribute won't notice changes to the "value" property. The "value" attribute is bound to the "defaultValue" property, while the "value" property isn't bound to any attribute (thanks to porneL for pointing this out).
Note there's a similar relationship with the "checked" attribute and "defaultChecked" and "checked" properties; if you use an attribute selector [checked] rather than the pseudo-class :checked, you won't see style change when a checkbox's state changes. Unlike the "checked" family, "value" doesn't have a corresponding pseudo-class that you could use.
Try the following test page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dynamic attribute selectors</title>
<style type="text/css">
input:not([value]), div:not([value]) {
background-color: #F88;
}
input[value], div[value] {
border: 5px solid #8F8;
}
input[value=""], div[value=""] {
border: 5px solid #F8F;
}
input:not([value=""]), div:not([value=""]) {
color: blue;
border-style: dashed;
}
*.big {
font-size: 200%;
}
</style>
<script>
function getElt() {
var id=prompt("Enter ID of element", "d1");
if (id) {
return document.getElementById(id);
} else {
return {className: ''};
}
}
function embiggen() {
getElt().className="big";
return false;
}
function smallify() {
getElt().className="";
return false;
}
</script>
</head>
<body>
<form method="post" enctype="multipart/form-data">
<div id="d1">no value</div>
<div id="d2" value="">empty value</div>
<div id="d3" value="some">some value</div>
<p><label for="foo">foo:</label> <input name="foo" id="foo" /></p>
<p><label for="bam">bam:</label> <input name="bam" id="bam" value="bug-AWWK" /></p>
<p><label for="file">File to upload:</label> <input type="file" name="file" id="file" onchange="setValueAttr(this)"/></p>
<input type="button" value="Embiggen" onclick="return embiggen()" />
<input type="button" value="Smallify" onclick="return smallify()" />
</body>
</html>
Changing the value of anything and the style won't change. Change the class of anything and the style will change. If you add the following JS function and bind it to a change event on an input, the background style will change.
function bindValue(elt) {
var oldVal=elt.getAttribute('value');
elt.setAttribute('value', elt.value);
var newVal=elt.getAttribute('value');
if (oldVal != newVal) {
alert('Had to change value from "'+oldVal+'" to "'+newVal+'"');
}
}
This binds the "value" property to the "value" attribute, so updates to the former by user input will propagate to the latter (programmatically setting the "value" property won't cause a change event).
In examining the JS properties of file inputs before and after (by use of the following script), the only one with an appreciable change was "value". From this, I doubt there are any other HTML attributes that change and could hence be used in an attribute selector.
<script>
var file = {blank: {}, diff: {}};
var fInput = document.getElementById('file');
for (p in fInput) {
try {
file.blank[p] = fInput[p];
} catch (err) {
file.blank[p] = "Error: setting '"+p+"' resulted in '"+err+"'";
}
}
function fileDiff() {
for (p in fInput) {
try {
if (file.blank[p] != fInput[p]) {
file.diff[p] = {orig: file.blank[p], now: fInput[p]};
}
} catch (err) {
//file.diff[p] = "Error: accessing '"+p+"' resulted in '"+err+"'";
}
}
}
if (fInput.addEventListener) {
fInput.addEventListener('change', fileDiff, false);
} else if (fInput.attachEvent) {
fInput.attachEvent('onchange', fileDiff);
} else {
fInput.onchange = fileDiff;
}
</script>
You can hack together something using a link to a non-existent fragment and the :visited pseudo class, but it's quite egregious.
<style>
a input {
display: none;
}
:not(a) + a input,
a:visited + a input
{
display: block /* or "inline" */ ;
}
</style>
...
<input type="file" ... />
<input type="file" ... />
<input type="file" ... />
You'd need to generate unvisited targets for the links every time the page is loaded. Since you'd have to do it server side, you couldn't do this with complete certainty, though you could get the probability of generating a previously visited target arbitrarily close to 0. It also doesn't work on all browsers, such as Safari. I suspect this is due to the following from CSS2 and CSS3:
Note: It is possible for style sheet authors to abuse the :link and :visited pseudo-classes to determine which sites a user has visited without the user's consent.
UAs may therefore treat all links as unvisited links, or implement other measures to preserve the user's privacy while rendering visited and unvisited links differently.
You might be able to hack something together using other selectors on other elements, but I suspect this can't be done cleanly.
To select empty fields you can try
input[type=file][value=""] {
background-color: red;
}
I tested it on jsfiddle. There at least, I needed to define an empty value attribute on the input tag for it to work
<input type="file" id="test" value="">
Using the '+' operator as you've done in your example would match two separate file inputs, one right after the other. It doesn't examine two attributes of the same tag as you appear to want.