I am trying to directly style <label> but based on value "black"
The html is output by a Wordpress plugin and the <label> has a #before selector which I would like to target for changing and icon color. However I wish to change the icon color multiple times based on the radio value .. In the case of value="black" I wish to change the icon to black.
Can anybody point me in the right direction?
<div class="mspc-text-wrapper">
<strong class="mspc-attribute-title">Black</strong>
<div class="mspc-radio ui radio checkbox">
<input type="radio" name="pa_colour" value="black">
<label>
::before
::after
</label>
</div>
</div>
You select it using the adjacent sibling selector + like this:
input[value=black] + label::before
label::before { content: '::before'; } /* just so the result is visible */
label::after { content: '::after'; } /* just so the result is visible */
input[value=black] + label::before { color: red; }
input[value=black] + label::after { color: green; }
<div class="mspc-text-wrapper">
<strong class="mspc-attribute-title">Black</strong>
<div class="mspc-radio ui radio checkbox">
<input type="radio" name="pa_colour" value="black">
<label>
</label>
</div>
</div>
Related
I want to make selections more visual for colors. For example I want a way to add either an HTML select menu or checkbox to select color.
(blue color square) - Blue
(white color square) - White
(red color square) - Red.
Is it possible to do with select menu? If not whats best way to do it with checkboxes? stylize each one differently with CSS? Or add an image in front of it?
Any code samples or links appreciated, thx.
Since you're only looking for a few colors instead of the whole range, it's probably best to build your own input. We're going to want:
input[type=radio] to select the color
Labels for the inputs containing the label and color
To do this, we can do something like this
<form>
<div class="colorChoice">
<input type="radio" name="color" value="#ff0000" id="select-red">
<label for="select-red"><div class="bg-red"></div> Red</label>
</div>
...
</form>
Each div contains the HTML for each color selection: an input with the value equal to the color's hex code (although you could change this to whatever you want) and a label with a color box and the associated color name.
To create the color boxes, we can set the size and background color of the divs. Doing CSS is probably best, it's wasteful to load images that really aren't necessary.
.colorChoice label div {
width: 24px;
height: 16px;
display: inline-block;
}
.bg-red {
background-color: #ff0000;
}
...
An advantage of this is that the bg-* classes are not just limited to this form - it can also be applied to other elements that need background colors.
.colorChoice label div {
width: 24px;
height: 16px;
display: inline-block;
}
.bg-red {
background-color: #ff0000;
}
.bg-green {
background-color: #00ff00;
}
.bg-blue {
background-color: #0000ff;
}
.bg-black {
background-color: #000000;
}
<form>
<div class="colorChoice">
<input type="radio" name="color" value="#ff0000" id="select-red">
<label for="select-red"><div class="bg-red"></div> Red</label>
</div>
<div class="colorChoice">
<input type="radio" name="color" value="#00ff00" id="select-green">
<label for="select-green"><div class="bg-green"></div> Green</label>
</div>
<div class="colorChoice">
<input type="radio" name="color" value="#0000ff" id="select-blue">
<label for="select-blue"><div class="bg-blue"></div> Blue</label>
</div>
<div class="colorChoice">
<input type="radio" name="color" value="#000000" id="select-black">
<label for="select-black"><div class="bg-black"></div> Black</label>
</div>
</form>
If you want to use checkboxes instead, you can replace name="color" value="..." with just name="..." and change the input types from radio to checkbox.
I'm able to change the color of radio label text when the button is checked (eg. turning the text green), but I'd like to do so conditionally. Ie. When option 1 is checked, I want the text to change to green, and when option 2 is checked I want the text to be red.
[JSFiddle][1]
HTML
<div class="radio">
<input type="radio" name="option"><label>Red when checked</label>
</div>
<div class="radio">
<input type="radio" name="option"><label>Green when checked</label>
</div>
CSS
input[type=radio]:checked + label {
color: green;
}
If you just want each item to have its own color when checked, you can use more specific selectors:
input[type=radio]:nth-child(1):checked {
color: green;
}
input[type=radio]:nth-child(2):checked {
color: red;
}
If you want both items to take on the same color, CSS alone can't do that yet. You'll need to use JavaScript to add a class to a parent container and set the styles based on that. Something like this:
HTML:
<div id="container">
<div class="radio" data-color="green">
<input type="radio" name="option"><label>Red when checked</label>
</div>
<div class="radio" data-color="red">
<input type="radio" name="option"><label>Green when checked</label>
</div>
</div>
JavaScript:
const container = document.getElementById("container");
container.addEventListener("input", (event) => {
container.className = event.target.dataset.color;
})
CSS:
.green input[type=radio] {
color: green;
}
.red input[type=radio] {
color: red;
}
i recommend using JavaScript functions like
document.queryselectorAll()
It's simple to apply CSS to checked/unchecked checkboxes (using :checked) and their labels. However, I need to apply another style to all checkboxes when all of them are unchecked.
This is relatively simple to implement using JavaScript but I have a widget which I'm not eager to modify so I'd like to know whether there's a CSS trick for that. I suspect that there isn't, but there's always somebody who's smarter :)
PS well, the html bit looks like this, nothing special:
<div>
<input type=checkbox id=chkFilterMath>
<span><label for=chkFilterMath>Math</label></span>
<input type=checkbox id=chkFilterHist>
<span><label for=chkFilterHist>History</label></span>
...
</div>
Current CSS uses the
input:not(:checked) + span label
selector to apply the styles to unchecked checkboxes/labels.
A simplified example may be found here: https://jsfiddle.net/k56hz8va/ I'd like to set color: black to the labels when all of checkboxes are unchecked.
Lasciate ogni speranza, voi ch’entrate
No. There are no such CSS selectors that allows to select previous DOM elements in dependence on state of following elements. See Is there a “previous sibling” CSS selector? and Is there a CSS parent selector? posts for details.
There is a hack around this that I use:
Hide the input itself, but keep the label. Then use the pseudo element ::before to insert some icon to denote checked / unchecked.
Here's a demo: https://codepen.io/anon/pen/WdrdPE
and the code:
<input id="option_1" type="checkbox"><label for="option_1">thing 1</label>
<input id="option_2" type="checkbox"><label for="option_2">thing 2</label>
<input id="option_3" type="checkbox"><label for="option_3">thing 3</label>
css:
#import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
input {
display:none;
}
label {
display:block;
}
input:checked + label {
color:red;
}
label:before {
content:"\f1db";
margin-right:.3em;
font-family:Fontawesome;
}
input:checked + label:before {
content:"\f058";
margin-right:.3em;
font-family:Fontawesome;
}
The #sashaikevich's idea is great but requires some work to solve your question. You could place the labels after all inputs. Then your CSS and HTML will be bulky, but you will be able to control styles of the labels in dependence on all inputs state.
Try to run the snippet below. The latest rule has highest priority, therefore if any (at least one) of checkboxes is checked, then the labels is black. Otherwise the labels is red.
[type=checkbox] {
display: none;
}
#check-box-1:checked~[for=check-box-1] .glyphicon-unchecked,
#check-box-2:checked~[for=check-box-2] .glyphicon-unchecked,
#check-box-3:checked~[for=check-box-3] .glyphicon-unchecked,
#check-box-1:not(:checked)~[for=check-box-1] .glyphicon-check,
#check-box-2:not(:checked)~[for=check-box-2] .glyphicon-check,
#check-box-3:not(:checked)~[for=check-box-3] .glyphicon-check
{
display: none;
}
[for] {
color: red;
}
[type=checkbox]:checked~[for] {
color: inherit;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="check-box-set">
<input id="check-box-1" type="checkbox" />
<input id="check-box-2" type="checkbox" checked="checked" />
<input id="check-box-3" type="checkbox" />
<label for="check-box-1">
<span class="glyphicon glyphicon-unchecked" aira-hidden="true"></span>
<span class="glyphicon glyphicon-check" aira-hidden="true"></span>
1
</label>
<label for="check-box-2">
<span class="glyphicon glyphicon-unchecked" aira-hidden="true"></span>
<span class="glyphicon glyphicon-check" aira-hidden="true"></span>
2
</label>
<label for="check-box-3">
<span class="glyphicon glyphicon-unchecked" aira-hidden="true"></span>
<span class="glyphicon glyphicon-check" aira-hidden="true"></span>
3
</label>
</div>
In the example I use Bootstrap Glyphicons. But it is possible to use another glyps, images or CSS shapes.
I have a DIV with check boxes and labels defined by CSS style when checked:
#project input:checked + label {background-color:#787878;color:white;}
I want to make two buttons with exceptions to color:white.
Checkbox ID="B" label background-color to turn red and Checkbox ID="C" label background-color to turn blue. I can't figure it out how to add that specificity.
Thanks in advance.
EDIT: (adding HTML code)
<input type="checkbox" id="B" value="B" style="display:none;" onclick="document.getElementById('B').style.color = 'red'"><label for="B"> checkbox B </label>
This is my failed attempt with a line level change. I only posted CSS because I thought this could be done in the style.
You don't need the Javascript. Also add #B, #C { display: none; } if needed.
#B:checked + label {
background: red;
color: white;
}
#C:checked + label {
background: blue;
color: white;
}
<input type="checkbox" id="B" />
<label for="B">test</label>
<input type="checkbox" id="C" />
<label for="C">test</label>
Is this what you are looking for input[id="test"]:checked this styles inputs with specific id's and checked state.
And you cant style the background-color in a checkbox as far as i know.
If I have a radio input that is wrapped within a label, how can I target the label when the input is checked?
<div>
<p>Payment Plan:</p>
<label><input name="os0" type="radio" value="monthly">TEST</label>
</div>
I tried:
input:checked + label { color: red }
and
input:checked + label
But none worked, what I am doing wrong? I also tried the > selector.
The reason I have label wrapping the input, is because I NEED the label to be clickable
There's no parent or backward selector in CSS (yet?). Thus, we can't select the wrapper label by the wrapped input.
There are two options:
1) Wrapping the content by an inline wrapper like <span> element, as follows:
<label>
<input name="os0" type="radio" value="monthly">
<span>TEST</span>
</label>
Then select the <span> by using adjacent sibling selector +:
input:checked + span {
color: red
}
WORKING DEMO
2) Using for attribute for the label to target the input by its id attribute as follows:
<input name="os0" type="radio" id="myinput" value="monthly">
<label for="myinput">TEST</label>
And Then select the label by:
input:checked + label {
color: red
}
WORKING DEMO.
Your css will work if you modify your html to this:
<div>
<p>Payment Plan:</p>
<input id="os0" name="os0" type="radio" value="monthly">
<label for="os0">TEST</label>
</div>
Using the for attribute with an id on the input will let you click on the label to affect the button, as it does when wrapped in the element.
http://jsfiddle.net/PMmrk/