I'm trying to change the background colour of an image which is next to each radio button in a group, when the relevant button is checked. I used the following HTML and CSS:
.option-choice:checked img.img-thumbnail {
background-color: #004990 !important;
border-color: red;
}
<div class="radio">
<label>
<input class="option-choice" name="option[227]" value="18" type="radio">
<img src="imageurl.jpg" alt="20mm " class="img-thumbnail">20mm
</label>
</div>
Yet the CSS does not work, and the image remains unchanged. Is it possible my CSS is not correct here, or is it just not possible to do this?
This..
.option-choice:checked img.img-thumbnail {
background-color: #004990 !important;
border-color: red;
}
assumes that the image is a descendant of the input which it is not.
Use the Adjacent Sibling Selector +
.option-choice:checked + img.img-thumbnail {
background-color: #004990 !important;
border-color: red;
}
Your selector has to be .option-choice:checked + img.img-thumbnail:
.option-choice:checked + img.img-thumbnail {
background-color: #004990 !important;
border-color: red;
}
<div class="radio">
<label>
<input class="option-choice" name="option[227]" value="18" type="radio">
<img src="imageurl.jpg" alt="20mm " class="img-thumbnail">20mm
</label>
</div>
Related
":default" alone is working, but when you add the "label" on the pseudo-class, it doesn't work.
.pseudo-test input:default {
box-shadow: 0 0 20px 20px red;
}
.pseudo-test input:default+label {
color: coral;
}
<div style="margin-top:200px" class="pseudo-test">
<form action="another-action.php">
<label for="summer">Select your gender:</label>
<input type="radio" id="summer" name="radio-selection" value="value-of-a-radio" checked>
<button>Press to submit</button>
</form>
</div>
":default" only works, but when you add "label" by typing "default + label", it doesn't work. The pseudo-class should apply to the label of the input, but it's not working.
+ is used to select the adjacent sibling appearing immediately after in the markup; you can't select previous siblings with CSS. However, you can achieve a similar effect by placing the label directly after the input and floating it to the left.
.pseudo-test input:default {
box-shadow:0 0 20px 20px red;
}
.pseudo-test input:default + label {
color: coral;
float: left;
margin-right: 5px;
}
<div style="margin-top:200px" class="pseudo-test">
<form action="another-action.php">
<input type="radio" id="summer" name="radio-selection" value="value-of-a-radio" checked>
<label for="summer">Select your gender:</label>
<button>Press to submit</button>
</form>
</div>
I'm new to CSS and I will appreciate any help.
I'm trying to style the asterisk * inside the span element of a required element based on the input:valid property.
<input value="someValue" id="firstnameId" required />
<label class="lbStyle" for="FirstName">
First Name
<span class="ddff" style="color:red;">*</span>
</label>
I tried to do :
input:valid .ddff {
color: palegreen;
}
But it's not working.
I want to change the color of the * from red to green if the input is valid or keep it red otherwise.
How can I achieve it using CSS?
Thanks!
your css is inline, try with !important
input:valid + label .ddff {
color: palegreen !important;
}
<input value="someValue" id="firstnameId" required />
<label class="lbStyle" for="FirstName"> First Name
<span class="ddff" style="color:red;">*</span>
</label>
You can use :valid and :invalid selector for form elements with limitation such as required.
Try this:
input[required]:invalid + label:after{content:"*";color:red}
input[required]:valid + label:after{content:"*";color:green}
<input placeholder="Placeholder" required />
<label> First Name</label>
it can works because .ddff is not an input child
<input value="someValue" id="firstnameId" required />
<label class="lbStyle" for="FirstName"> First Name
<span class="ddff">*</span>
</label>
.ddff{
color: red;
}
input:valid + label .ddff {
color: green;
}
input:invalid +label .ddff {
color: red;
}
Your CSS selector is not correct, you have to use the Adjacent sibling combinator:
input + label .ddff {
color: red;
}
input:valid + label .ddff {
color: palegreen;
}
<input value="someValue" id="firstnameId" required />
<label class="lbStyle" for="FirstName">
First Name
<span class="ddff">*</span>
</label>
can you please try:
CSS:
input:valid + label span.ddff {
color: palegreen !important;
}
Note: You can use an inline CSS. please overwrite your CSS.
I hate css, I really do. I think this one will be trivial for most of you so please help me with this one.
I would like to create a radiobutton which have to change the background color of the label it's in. Here's the code which obviously does not work:
js:
<div className="container">
<label className="check" htmlFor="id">
<input {...radio.input} name="radio" type="radio" id="id" />
</label>
</div>
and css:
.check {
background-color: green;
display: inline-block;
height: 34px;
position: relative;
width: 60px;
cursor: pointer;
}
.check input {
display:none;
}
input[type="radio"]:checked + .check {
background-color: blue;
}
.container {
margin: 0 auto;
}
The + selector in CSS selects the next element in the HTML. Doing input + label is not going to work because your input is wrapped in the label.
The easiest solution for this would be to apply a checked CSS class in react when the input is checked. The other option would be to place the label AFTER the input in your markup, but that will probably require you to apply more CSS to get the appearance you need.
I really love CSS, I really do! ;)
Change your HTML to:
<div className="container">
<input {...radio.input} name="radio" type="radio" id="id" />
<label className="check" htmlFor="id">
</label>
</div>
and style the radio button individually.
I want to give an image a border if a radio button is checked.
This is the HTML syntax:
<div class="frm_radio">
<label for="field_n9r1a2-0">
<input type="radio" name="x" id="t" value="Betreuung">
Betreuung
<img src="/wp-content/uploads/2016/03/unterichten_betreuen.jpg">
</label>
</div>
I try it with CSS selector :checked but it doesn't work.
input[type=radio]:checked img {
border: 2px solid red;
}
Can somebody explain how I can solve it?
You need to add a ~ (sibling) operator:
input[type=radio]:checked ~ img {
border: 2px solid red;
}
Without the ~ it treats as radio button being the parent of img. If you didn't have any text, I would have suggested +.
input[type=radio]:checked ~ img {
border: 2px solid red;
}
<div class="frm_radio">
<label for="field_n9r1a2-0">
<input type="radio" name="x" id="t" value="Betreuung">
Betreuung
<img src="/wp-content/uploads/2016/03/unterichten_betreuen.jpg">
</label>
</div>
I want to add a style to a radio button's selected label:
HTML:
<div class="radio-toolbar">
<label><input type="radio" value="all" checked>All</label>
<label><input type="radio" value="false">Open</label>
<label><input type="radio" value="true">Archived</label>
</div>
CSS
.radio-toolbar input[type="radio"] {display:none;}
.radio-toolbar label {
background:Red;
border:1px solid green;
padding:2px 10px;
}
.radio-toolbar label + input[type="radio"]:checked {
background:pink !important;
}
Any ideas what I'm doing wrong?
.radio-toolbar input[type="radio"] {
display: none;
}
.radio-toolbar label {
display: inline-block;
background-color: #ddd;
padding: 4px 11px;
font-family: Arial;
font-size: 16px;
cursor: pointer;
}
.radio-toolbar input[type="radio"]:checked+label {
background-color: #bbb;
}
<div class="radio-toolbar">
<input type="radio" id="radio1" name="radios" value="all" checked>
<label for="radio1">All</label>
<input type="radio" id="radio2" name="radios" value="false">
<label for="radio2">Open</label>
<input type="radio" id="radio3" name="radios" value="true">
<label for="radio3">Archived</label>
</div>
First of all, you probably want to add the name attribute on the radio buttons. Otherwise, they are not part of the same group, and multiple radio buttons can be checked.
Also, since I placed the labels as siblings (of the radio buttons), I had to use the id and for attributes to associate them together.
If you really want to put the checkboxes inside the label, try adding an extra span tag, eg.
HTML
<div class="radio-toolbar">
<label><input type="radio" value="all" checked><span>All</span></label>
<label><input type="radio" value="false"><span>Open</span></label>
<label><input type="radio" value="true"><span>Archived</span></label>
</div>
CSS
.radio-toolbar input[type="radio"]:checked ~ * {
background:pink !important;
}
That will set the backgrounds for all siblings of the selected radio button.
You are using an adjacent sibling selector (+) when the elements are not siblings. The label is the parent of the input, not it's sibling.
CSS has no way to select an element based on it's descendents (nor anything that follows it).
You'll need to look to JavaScript to solve this.
Alternatively, rearrange your markup:
<input id="foo"><label for="foo">…</label>
You can add a span to your html and css .
Here's an example from my code ...
HTML ( JSX ):
<input type="radio" name="AMPM" id="radiostyle1" value="AM" checked={this.state.AMPM==="AM"} onChange={this.handleChange}/>
<label for="radiostyle1"><span></span> am </label>
<input type="radio" name="AMPM" id="radiostyle2" value="PM" checked={this.state.AMPM==="PM"} onChange={this.handleChange}/>
<label for="radiostyle2"><span></span> pm </label>
CSS to make standard radio button vanish on screen and superimpose custom button image:
input[type="radio"] {
opacity:0;
}
input[type="radio"] + label {
font-size:1em;
text-transform: uppercase;
color: white ;
cursor: pointer;
margin:auto 15px auto auto;
}
input[type="radio"] + label span {
display:inline-block;
width:30px;
height:10px;
margin:1px 0px 0 -30px;
cursor:pointer;
border-radius: 20%;
}
input[type="radio"] + label span {
background-color: #FFFFFF
}
input[type="radio"]:checked + label span{
background-color: #660006;
}
Just use label:focus-within {} to style a label with a checked radio or checkbox.
Here's an accessible solution
label {
position: relative;
}
label input {
position: absolute;
opacity: 0;
}
label:focus-within {
outline: 1px solid orange;
}
<div class="radio-toolbar">
<label><input type="radio" value="all" checked>All</label>
<label><input type="radio" value="false">Open</label>
<label><input type="radio" value="true">Archived</label>
</div>
As TimStieffenhofer mentioned in their answer, the easiest way is to have the input field as a child of the label and use the :focus-within pseudo-class on the label.
If you want to hide your radio button and set the input to hidden or display none, that will no longer work.
The work around is to give the input field a z-index of -1 (or any z-index lower than the parent label).
As there is currently no CSS solution to style a parent, I use a simple jQuery one here to add a class to a label with checked input inside it.
$(document).on("change","input", function(){
$("label").removeClass("checkedlabel");
if($(this).is(":checked")) $(this).closest("label").addClass("checkedlabel");
});
Don't forget to give the pre-checked input's label the class checkedlabel too