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
Related
I have a number of [input type checkbox] with corresponding labels, for example:
<div>
<input id="idOne" type="checkbox" checked>
<input id="idTwo" type="checkbox">
</div>
<div>
<label for="idTwo">One</label>
<label for="idTwo">Two</label>
</div>
The label/input are connected with the [for] property. I need to style the lable based on the [checked]-status of the checkbox. Can this be done WITHOUT a combinator as the structure makes using child/sibling combinators a poor choice.
Somthing along the lines of:
label[input:checked = "true"]{
color:pink;
}
Can this be done in a stable fashion with css or will I need to add/remove a classs with JS?
THX in advance :)
I have tried to write a selector that will target the label of a checked input element (type="checkbox").
Yes, you can apply CSS to the label on the input checked status.
input[type=checkbox] + label {
color: #ccc;
font-style: italic;
}
input[type=checkbox]:checked + label {
color: #0964aa;
font-style: normal;
}
<input type="checkbox" id="idname" name="cb_name">
<label for="idname">CSS is Awesome</label>
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'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;
}
I have a radio button and I need to add a style to its parent div when the radio button is checked. This I need to do only with css. In the below html, if the radio is checked, i need to apply a color to the div "options"
HTML
<div class="options">
<span class="option_radio">
<input type="radio" name="payMethod" id="payMethod1" value="aaa" >
</span>
<span class="option_image">
<label for="payMethod1">
<img src="abc.png" >
</label>
</span>
</div>
I tried the below approaches but its not coming correctly
.options input[type="radio"]:checked span{
background-color:black;
}
.options input[type="radio"]:checked div.options{
background-color:black;
}
could somebody please help me on this
Sorry, can't do that yet. You can only go down the tree, not up it. You will either need to make the elements you want to style siblings or descendents of the radio button. Ancestor selectors do not yet exist:
http://css-tricks.com/parent-selectors-in-css/
<input type="radio" name="payMethod" id="payMethod1" value="aaa" />
<div class="options">
<span class="option_radio">
</span>
<span class="option_image">
<label for="payMethod1">
<img src="abc.png" />
</label>
</span>
</div>
css
input[type='radio']:checked + div.options {
background-color:green;
}
input[type='radio']:checked + div.options span {
background-color:red;
}
That would require using parent selectors from CSS4 http://www.w3.org/TR/selectors4/ Unfortunately CSS4 is not yet available. So for today it is not possible to do that using pure css.
Javascript is your answer. Provided Vanilla and jQuery examples.
var payMethod = document.querySelector('#payMethod1');
payMethod.onchange = function() {
alert('clicked')
// Get span and div
if(this.checked) {
var elements = document.querySelectorAll('.option_radio, .options');
// Loop elements & add class
for(var i = 0; i < elements.length; i++) {
if (elements[i].classList)
elements[i].classList.add("checked");
else
elements[i].className += ' checked';
}
}
};
//jQuery implementation
$('#payMethod1').change(function() {
if($(this).is(':checked')) {
$('.option_radio, .options').addClass('checked');
}
});
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 !!!