This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
Closed 2 years ago.
I have HTML structure that looks like -
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">TEXT A
</label>
</div>
I want that when the input type is checked (checked being the inbuilt class that is added automatically on checking the radio button ), I apply a style before label.
In unchecked case -
label::before{
/* something */
}
In checked case, I am writing something like this,
input[type='radio']:checked label::before{
/* something */
}
I want to apply label::before where input[type='radio']:checked but I don't know how to merge these two conditions in CSS. I just need help with the syntax.
Can anyone please tell me ?
Thanks !!
Solution
Use for attribute on label instead of nesting input inside of the label in order to use the the adjacent sibling combinator.
Example
HTML
<div class="form-check-inline">
<input type="radio" class="form-check-input" name="optradio">
<label class="form-check-label" for=“optradio”>
TEXT A
</label>
</div>
CSS
input[type='radio']:checked + label::before{
/* something */
}
References
Adjacent sibling combinator: https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator
Related
This question already has answers here:
How do I change the color of radio buttons?
(27 answers)
Closed last month.
Would like to change the color of radio button:
However, it seems not working, still getting the default color:
You can't change the radio button color directly, You need to build your own and customize it as you want.
or you can use filter with hue-rotate() but it's not supported on Internet Explorer have a look here for more info
Edit
There is a better way to do this as #Servesh Chaturvedi mentioned using accent-color: red;
#one{
filter: hue-rotate(150deg);
}
#two{
accent-color:red;
}
<input type="radio" id="one" name="radio" value="first">
<label for="html">First</label><br>
<input type="radio" id="two" name="radio" value="second">
<label for="html">Second</label><br>
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 2 years ago.
I'm having problems getting a checkbox to hide another div using CSS when that checkbox is selected. For example, I have two checkboxes
Checkbox 1
Checkbox 2
When checkbox 1 is selected, it's suppose to hide checkbox 2 but it doesn't. Any ideas on what I'm doing wrong?
Here's what I've done so far
#cover_photo_set_featured input:checked ~ #one_image_feature_image label {display:none}
<div id="cover_photo_set_featured">
<input type="checkbox" id="acf-block_601d8b4a91a27-field_5f8bec0fb8152-sfi" name="acf-block_601d8b4a91a27[field_5f8bec0fb8152][]" value="sfi">Checkbox 1
</div>
<div id="one_image_feature_image">
<label>
<input type="checkbox" id="acf-block_601d8b6591a28-field_5f8cf27e7bf5f-one_img_set_feat_img" name="acf-block_601d8b6591a28[field_5f8cf27e7bf5f][]" value="one_img_set_feat_img">Checkbox 2
</label>
</div>
You cannot choose a higher level in CSS.
For this, you must set the <input> and the <div> you want to hide to at least the same level.
So we will need to save the <div id="cover_photo_set_featured"> element from being the parent of .
But since I see that you are using ACF, I add the input right in front of it to be able to select it with CSS, so you can easily select the next <input> with the "+" selector.
We can now give "display: none" and "aria-hidden" attributes to <div>, which is used purely for help.
#cover_photo_set_featured {
display: none;
}
#cover_photo_set_featured+input:checked~#one_image_feature_image label {
display: none
}
<div id="cover_photo_set_featured" aria-hidden="true"></div>
<input type="checkbox" id="acf-block_601d8b4a91a27-field_5f8bec0fb8152-sfi" name="acf-block_601d8b4a91a27[field_5f8bec0fb8152][]" value="sfi">Checkbox 1
<div id="one_image_feature_image">
<label>
<input type="checkbox" id="acf-block_601d8b6591a28-field_5f8cf27e7bf5f-one_img_set_feat_img" name="acf-block_601d8b6591a28[field_5f8cf27e7bf5f][]" value="one_img_set_feat_img">Checkbox 2
</label>
</div>
This question already has answers here:
What do commas and spaces in multiple classes mean in CSS?
(9 answers)
What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB? [duplicate]
(3 answers)
CSS "and" and "or"
(9 answers)
Closed 2 years ago.
I have two forms, one that contains a form field for entering a username and a second form on another page where a user enters an email address:
<!-- user.html -->
<form action="/account/login/" method="post">
<div class="form-group mt-3">
<input type="text" name="username" autofocus autocapitalize="none" autocomplete="username" maxlength="150" placeholder="Username" class="form-control form-control-md" required id="id_username">
</div>
<p class="mt-4"><input type="submit" class="btn btn-block btn-primary" value="Login"></p>
</form>
<!-- email.html -->
<form action="." method="post">
<div class="form-group">
<input type="email" name="email" autocomplete="email" maxlength="254" placeholder="Email" class="form-control form-control-md" required id="id_email">
</div>
<input type="submit" value="Send Email" class="btn btn-primary btn-block">
</form>
I'm trying to style both input controls using multiple attribute selectors like this but it's not working. The styles aren't being applied.
// styles.scss
form input[type=text][type=email] {
background-color: #f0f0f0;
}
But if I separate the types into two separate rules like this, the styles do get applied properly.
form input[type=text] {
background-color: #f0f0f0;
}
form input[type=email] {
background-color: #f0f0f0;
}
The CSS documentation says this should work. What am I doing wrong?
As per the documentation this matches when type=email AND type=text which can't be true.
Here, the selector matches all SPAN elements whose "hello" attribute
has exactly the value "Cleveland" and whose "goodbye" attribute has
exactly the value "Columbus":
span[hello="Cleveland"][goodbye="Columbus"] { color: blue; }
You would need to include both versions;
form input[type=text],
form input[type=email] {
background-color: #f0f0f0;
}
Add a comma after input with the type of text.
<div class="pane">
<div style="background-color: #f00">
<input type="radio" name="select" id="radio1" checked />
<label for="radio1">Radio 1</label>
</div>
<div>
<input type="radio" name="select" id="radio2" />
<label for="radio2">Radio 2</label>
</div>
</div>
I want to make an event: if an input[type=radio] is clicked, change css background-color of the parent (<div>). How can I do that?
Something like:
input[type="radio"]:checked < div {
background-color: #f00
}
Is there a way to do that without setting an id for per <div>?
p/s: I also don't want to use javascript or jquery to do that.
There's no parent selector in css, so you can't. You can try styling the input or the label.
You could try a sibling selector and absolutely position a sibling element behind your input.
EDIT: example with sibling element .inputbg:
https://jsfiddle.net/pfv77ghe/
unfortunately this cannot be achieved with current CSS features (hopefully this will be taken care of in the future versions). Right Now this can be done only using Javascript or Jquery.
CSS supports only child selector from a parent and not a parent selector from child.
HTML
I think this would work for you.
<input type="click" checked>
CSS
input[type= click]:checked+div{
background-color: #f00;
}
This question already has answers here:
How to affect other elements when one element is hovered
(9 answers)
Closed 8 years ago.
For example, I want to make two textboxes have the same style when either is focused:
<div class="divTxt">
<input type="text" id="a" class="a" />
<input type="text" id="b" class="b" />
</div>
and the css would be:
.a:focus
{
background-color:Blue;
}
.b:focus
{
background-color:Yellow;
}
What I need is make a's background-color:Yellow when b is focused and vice versa.
any possibilities? Thanks a lot.
You could try the General Sibling Selector(~) if the input boxes are next to each other.
Something like:
.a:focus { background-color:Blue;}
.a:focus~.b { background-color:Blue;}
.b:focus { background-color:Yellow;}
.b:focus~.a { background-color:Yellow;}
Note: Completely untested and a stab in the dark at best!
If they've got javascript disabled, they probably won't notice text box styles.
.chk1:focus{
background-color:Blue;
}
.chk2:focus{
background-color:Yellow;
}
text feilds
<input class=chk1 type=text id="a">
<input class=chk2 type=text id="b">
This one will work fine with FireFox but might have issues with IE6
See CSS Issue Focus For IE6
If you want this to work with IE, you might want to use javascript!!
Hope this helps
RDJ