I'm trying to target a span class located inside a label. Is this possible with css? I can affect the label, but I would really like to change the background color of item_title:
<style>
.item input[type=checkbox]:not(old):checked + label + item_title,
.item input[type=radio]:not(old):checked + label + item_title,
.item input[type=checkbox]:not(old):checked + span + label + item_title,
.item input[type=radio]:not(old):checked + span + label + item_title {
background: #007cd1;
}
</st
<div class="item">
<input data-price="45.00" data-label="Starter TV" id="tv_starter" type="radio" name="tv_choice" value="Starter TV" class="required">
<label style="height:250px;" for="tv_starter"><span class="item_title">Starter TV</span><br />Our Starter TV Package, $45.00</label>
</div>
This is entirely possible. But you have to correct some errors in your code.
First, I'm not sure what not(old) refers to. Is old a classname?
Second, regarding classnames. Be sure to refer to them in your css with the class identifier ., so .item_title is the right way to refer to that class.
Third, there are different types of combinators within css. + is the adjacent sibling combinator. > is the child combinator.
In your html, label is the adjacent sibling of your input, and .item_title is the child of label.
Finally, you are trying to use the [type=checkbox] type selector when you should be using [type=radio] to match your html.
See below and give this a good read: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
.item input[type=radio]:checked + label > .item_title {
background: #007cd1;
}
<div class="item">
<input data-price="45.00" data-label="Starter TV" id="tv_starter" type="radio" name="tv_choice" value="Starter TV" class="required">
<label style="height:250px;" for="tv_starter"><span class="item_title">Starter TV</span><br />Our Starter TV Package, $45.00</label>
</div>
Your css is invalid. Use this one to make an input[type='radio'] blue if he is selected:
.item > input[type='radio']:checked ~ label > .item_title {
background: #007cd1;
}
<div class="item">
<input data-price="45.00" data-label="Starter TV" id="tv_starter" type="radio" name="tv_choice" value="Starter TV" class="required">
<label style="height:250px;" for="tv_starter">
<span class="item_title">Starter TV</span>
<br />Our Starter TV Package, $45.00
</label>
</div>
Since the span is a child of the label not a sibling you need
.item input[type=checkbox]:not(old):checked + label > item_title /* etc*/
{
background: #007cd1;
}
Related
i made p tag and input type radio is in there
<p class="item-3">
<input id="fid-1" type="radio" name="globalType">Hey
</p>
How can i make "Hey" red with out label?
i already tried this
.item-3 input[type="radio"]:checked + p.item-3
Create a span element, and contain the 'hey' within the span element. This will create an inline element that you can then target with CSS.
If you are using multiple, use a class. If single, just an ID is fine.
CSS:
.hey {
color: red;
}
HTML:
<p class="item-3">
<input id="fid-1" type="radio" name="globalType"><span class='hey'>Hey</span>
</p>
i can change the color of the "vote-icon" when the radio button is checked but i can't change the color of the "radio-text". Any help will be appreciated.
<div class="vote-answers" id="poll-vote-{{$choice->id}}">
<label>
<input type="radio" name="choiceId" value="{{$choice->id}}">
<span class="vote-icon"></span>
<span class="radio-text">{{$choice->show($poll)}}</span>
</label>
</div>
#poll-vote-id {
label > input:checked + span.vote-icon:after,
label > input:checked + span.radio-text {
color: #3f75c7;
}
}
The + combinator means the very next element the adjacent sibling selector..which the .radio-text element is not.
Use the ~ selector instead...this is the general sibling selector.
https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
Ciao, I have this element here:
<div class="uk-form-row">
<div class="md-input-wrapper md-input-filled md-input-focus">
<label>Label</label>
<input type="text" class="md-input">
<span class="md-input-bar"></span>
</div>
</div>
This is from a material design theme (Altair Admin v2) so the element once the page is loaded does this:
As you can see the label is moving around (but maybe is not a big deal).
With other elements, if they are empty (invalid) I can underline them or change their color using css:
input:invalid::-webkit-input-placeholder{
color: #e53935 !important;
}
But being this a label BEFORE the input I don't know how I can select it with CSS. How do I turn the LABEL into a different color if the input is invalid?
There is a simpler way to get this done. The :valid and :invalid pseudo-classes will automatically bubble up to a parent <fieldset>. Here is the reference.
You can take advantage of this fact to style your label like so:
<fieldset>
<label>Label</label>
<input type="text" />
</fieldset>
Then in your CSS
fieldset:invalid > label:first-of-type {
color: #e53935 !important;
}
So if your input is :invalid it will invalidate your fieldset, which you can then reference to style your label.
Look at CSS code (simplified to illustrate my point):
.md-input-wrapper {
position: relative;
}
.md-input-wrapper > label {
position: absolute;
top: 16px;
left: 4px;
right: 0;
}
Label is positioned absolutely relative to wrapper, so you can put label element after input element in HTML:
<div class="md-input-wrapper">
<input type="text" class="md-input">
<span class="md-input-bar"></span>
<label>Label</label>
</div>
After that, you can use General sibling combinator to select label of invalid input:
input:invalid ~ label {
color: red;
}
I want to find out if it is possible to target both neighboring elements using the middle one?
for example:
<div>
<span class="icon">icon</span>
<input id="input" class="input error" type="text" />
<label for="input"></label>
<div>
When the input has the error class I want to target the label and the span to have the color red.
I managed to make the label red with the following:
input.error ~ label {
color: red;
}
However I've had no luck with the span. Can somebody maybe tell me if this is possible? and if so please help.
You can use flexbox with the order property to re-order the elements visually, while having the input as the first element in the DOM so you can use the general sibling selector.
div {
display: flex;
}
.icon {
order: -1;
}
input.error ~ * {
color: red;
}
<div>
<input id="input" class="input error" type="text">
<span class="icon">icon</span>
<label for="input">label</label>
<div>
I used jquery .siblings() to target the span and add a class to it.
I want to find out if it is possible to target both neighboring
elements using the middle one?
You can use the axe selector % to target both neighbouring elements.
Since there is no shared class or element type between .icon and label, you'll need to declare:
input.error % .icon,
input.error % label {
color: red;
}
Alternatively, (in this case) you might combine the CSS immediate subsequent sibling selector + and the axe immediate previous sibling selector ?:
input.error ? .icon,
input.error + label {
color: red;
}
HTML:
<label>
<input type="checkbox" />
</label>
<div>
stuff
</div>
I'd like to be able to style the DIV element depending on the checked state of the input, like
input ~ div{
display: none;
}
input:checked ~ div{
display: block;
}
Obviously the~ selector doesn't seem to work here. Neither does +
Is there any other solution (besides javascript) ?
Try this, im not sure what its cross browser compatibility is.
input:checked + div
{
background: #333;
height: 30px;
width: 30px;
}
This should work, but I wouldnt do it, I would do Javascript.
See my jsfiddle
Sadly there is no way to select an ancestor in pure CSS, which is what you would require to select an ancestor's sibling.
I have seen people surround other content with a label - while this is a very questionable practice, it would allow you to use the + selector to style the div:
<label>
<input type="checkbox" />
<div>
stuff
</div>
</label>
Edit:
Or this (thanks to #lnrbob for pointing it out)
<label for="myCheckbox">
This is my label
</label>
<input id="myCheckbox" type="checkbox" />
<div>
stuff
</div>
if any one need extra solution
<input id="myCheckbox" type="checkbox" />
<label for="myCheckbox"> This is my label</label>
<div>
show when check box is checked
</div>
and the css
#myCheckbox ~ label ~ div { display: none; }
#myCheckbox:checked ~ label ~ div { display: block; }
happy coding !!!