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>
Related
I am trying to change a border color for a span element when the radio button is checked. But my code is not working.
Here's a simpler version of my code:
.try-2 {
border-left: 3px solid pink;
padding-left: 5px;
}
input[type="radio"]:checked .try-2 {
border-left: 3px solid blue;
}
<input type="radio" id="html-css" name="fav_language" value="HTML-CSS">
<label for="html-css">
<span class="try-1">HTML</span>
<span class="try-2">CSS</span>
</label><br>
<input type="radio" id="js" name="fav_language" value="JS">
<label for="js">JS</label><br>
Your issue is, that span is not the sibling of the input. The sibling of the input is the label. You have to change your selector to: input[type="radio"]:checked ~ label span
.try-2 {
border-left: 3px solid pink;
padding-left: 5px;
}
input[type="radio"]:checked ~ label span {
border-left: 3px solid blue;
}
<input type="radio" id="html-css" name="fav_language" value="HTML-CSS">
<label for="html-css">
<span class="try-1">HTML</span>
<span class="try-2">CSS</span>
</label><br>
<input type="radio" id="js" name="fav_language" value="JS">
<label for="js">JS</label><br>
This is the issue I'm having - https://www.awesomescreenshot.com/video/512540?key=604f2d2682f6ef8061da033e213eaa58
I want the hover border to disappear whenever one of the options is selected so there isn't the dual borders look. I've tried a mixture of css and jquery so far, but I still can't seem to get the desired style.
This is my DOM:
<div class="swatch clearfix" data-option-index="0">
<div class="header">Size</div>
<div data-value="Small" class="swatch-element small available">
<input id="swatch-0-small" type="radio" name="option-0" value="Small" checked="">
<label for="swatch-0-small">
Small
<img class="crossed-out" src="//cdn.shopify.com/s/files/1/0317/8410/8172/t/6/assets/soldout.png?779">
</label>
</div>
<script>
jQuery('.swatch[data-option-index="0"] .small').removeClass('soldout').addClass('available').find(':radio').removeAttr('disabled');
</script>
<div data-value="Medium" class="swatch-element medium available">
<input id="swatch-0-medium" type="radio" name="option-0" value="Medium">
<label for="swatch-0-medium">
Medium
<img class="crossed-out" src="//cdn.shopify.com/s/files/1/0317/8410/8172/t/6/assets/soldout.png?779">
</label>
</div>
<script>
jQuery('.swatch[data-option-index="0"] .medium').removeClass('soldout').addClass('available').find(':radio').removeAttr('disabled');
</script>
<div data-value="Large" class="swatch-element large available">
<input id="swatch-0-large" type="radio" name="option-0" value="Large">
<label for="swatch-0-large">
Large
<img class="crossed-out" src="//cdn.shopify.com/s/files/1/0317/8410/8172/t/6/assets/soldout.png?779">
</label>
</div>
<script>
jQuery('.swatch[data-option-index="0"] .large').removeClass('soldout').addClass('available').find(':radio').removeAttr('disabled');
</script>
This is the CSS I'm currently using:
.swatch-element {
border: solid 2px #a1a1a1;
}
.swatch-element:hover {
border-color: #000;
}
.swatch input:checked + label {
border: solid #000 2px;
}
You could apply all borders to the label, so there would be no double borders, but just a change of border:
.swatch-element label {
border: solid 2px #a1a1a1;
}
.swatch-element:hover label {
border-color: #000;
}
.swatch-element input:checked + label {
border: solid #000 2px;
}
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>
I'm trying to get a garish red border around some radio buttons, but it is not showing up in Firefox latest or Chrome latest. Work fine in IE9/IE8.
Each of the input element on my form that are required has a data-val-required attribute put in by MVC3. All browsers puts in the red borders just dandy when we have a text or textarea inputs, but am struggling with the radio button. For IE, it works, but other browsers won't put the red border around it.
css:
input[data-val-required], select[data-val-required], textarea[data-val-required]
{
background-color: #F0FFFF;
border: 1px solid red;
}
view-source:
<label for="WaiveSelect">Do you waive confidentiality?</label><br />
<input data-val="true" data-val-number="The field WaiveSelect must be a number." data-val-required="Please select waive." id="WaiveSelect" name="WaiveSelect" type="radio" value="0" /> No, I do not waive confidentiality<br />
<input id="WaiveSelect_2" name="WaiveSelect" type="radio" value="2" /> Yes, I waive confidentiality<br />
<input id="WaiveSelect_3" name="WaiveSelect" type="radio" value="3" /> Yes, I waive confidentiality except to the client<br />
<span class="field-validation-valid" data-valmsg-for="WaiveSelect" data-valmsg-replace="true"></span>
What it looks like in IE (Firefox and Chrome shows no borders):
input[type=radio]{
outline: 1px solid red
}
I know this is four years old, but I came up with a nice solution using CSS Pseudo elements.
My requirement was to highlight an unchecked checkbox, or radio button in validation.
<input type="radio" class="required" name="radio1"/>
/* Radio button and Checkbox .required needs an after to show */
input[type=radio].required::after, input[type=checkbox].required::after {
display: block;
width: 100%;
height: 100%;
background: transparent;
content: '';
border: 2px solid red !important;
box-sizing: border-box;
}
/* Radio buttons are round, so add 100% border radius. */
input[type=radio].required::after {
border-radius:100%;
}
You could accomplish by wrapping each input element with div tag and give it a border and a float left... like this:
<div style="border:1px solid red;float:left">
<input type="radio".. />
</div>
No, I do not waive confidentiality
Not all browsers support borders around radio buttons and checkboxes. I voted for a bug years ago to have this included in Gecko but so far they haven't implemented it.
This may help you:
.style {
border: 1px solid red;
width: 20px;
height: 20px;
text-align: center;
margin-top: 2px;
background-color: #f0ffff;
}
<div class="style">
<input type="radio" />
</div>
<div class="style">
<input type="radio" />
</div>
<div class="style">
<input type="radio" />
</div>
<div class="style">
<input type="radio" />
</div>
View on JSFiddle
Complete code using jquery
https://jsfiddle.net/xcb26Lzx/
$(function(){
$('.layer').css('border',0);
$('input:radio').change(
function(){
if ($(this).is(':checked')) {
$('.layer').css('border','1px solid red');
}
});
});
Try this...
Put a div around the input and assign a class to the div like so:
<div class="custom"><input type="radio"></div>
Then open your custom css file and add this CSS
.custom {border: 1px solid red; border-radius: 30px; padding: 3px 3px 0 3px; background: red;}
This should create a nice red border around the radio button. If you're using a check box you would simply remove the border-radius: 30px from the css. Depending you may need to play with the padding a bit to center the button, but this worked for me.
Edit: You will also want to assign the following CSS to the div so it lines up correctly.
.custom {display: inline;}
fiddle link
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