I want to give my upper label a background if the radio button is checked.
I do not want to give the span a background, because the background needs to include the radio button.
<label>
<input type="radio" checked="checked">
<span>text</span>
</label>
See my complete code here: https://jsfiddle.net/kL2h46x5/
How can I fix that?
There is no way to select the parent of the input element. But you could rearrange your markup to achieve the desired effect:
HTML:
<input class="radio-gender bestelling-type" type="radio" checked="checked" onclick="javascript:yesnoCheck();" name="yesno" id="noCheck">
<label class="type-bestelling" for="noCheck">
<span class="type-bestelling-particulier">Particulier</span>
</label>
<input class="radio-gender bestelling-type" type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck">
<label class="type-bestelling" for="yesCheck">
<span class="type-bestelling-zakelijk">Zakelijk</span>
</label>
CSS:
label.type-bestelling {background-color: #f1f1f1; margin-right:10px;}
input:checked+label {
background:red;
}
https://jsfiddle.net/kL2h46x5/9/
https://jsfiddle.net/kL2h46x5/6/
Use
:checked + span {
background-color: #f10;
}
Related
I would like to have 2 radio buttons with the default option being a standard radio button with a text label, and the second option having an input field as the label. Without using javascript I wish to have the second radio be selected if the input field receives focus.
The html looks like the following:
<form method="post" action="/">
<div class="some_style">
<input type="radio" name="n1" value="v1" id="radio_1" checked="checked"/>
<label for="radio_1">Option 1</label>
</div>
<div class="some_style">
<input type="radio" name="n2" value="v2" id="radio_2"/>
<label for="radio_2">
<input name="n3" value="v3"/>
</label>
</div>
</form>
The label will not work like this because the text input receives the focus on click.
So, without javascript you will not be able to achieve what you want I fear.
One trick: You could position the label above the input text and hide it if the checkbox is checked.
But: You will then have to click twice to give the text input the focus. To make this reasonable to the user, you eg. could hide the border if the checkbox is unchecked and show it if checked.
#mylabel {
display: block;
#background-color: red;
position: relative;
width: 200px;
height: 2em;
left: 2em;
top: -2em
}
#radio_2:checked~#mylabel {
display: none;
}
#radio_2:not(:checked)~#n3 {
border: none;
}
label {
cursor: pointer;
}
<form method="post" action="/">
<div class="some_style">
<input type="radio" name="n1" value="v1" id="radio_1" checked="checked" />
<label for="radio_1">Option 1</label>
</div>
<div class="some_style">
<input type="radio" name="n1" value="v2" id="radio_2" />
<input name="n3" value="v3" id="n3" />
<label for="radio_2" id="mylabel"></label>
</div>
</form>
This is the label and I want to change its width from style defined in my style rule in the <head> .
<label for="gender">Gender:</label>
<input type="radio" name="gender" value="Male" required>Male
<input type="radio" name="gender" value="Female" required>Female
By using this: label[for="gender"] { display: inline-block; width: 200px;}
Inline elements like a <label> is displayed so that its height and width is calculated by the browser based on its content. If you want to control height and width you have to change those elements blocks (display: inline-block or display: block).
See fiddle https://jsfiddle.net/csgn6051/7/
label[for='gender'] {
width: 200px;
display:inline-block;
}
<label for="gender">Gender:</label>
<input type="radio" name="gender" value="Male" required>Male
<input type="radio" name="gender" value="Female" required>Female
What is the best way of lining up the Remove and the input control, and not have it on a different line?
Fiddle here
<input type="text" class="form-control booking waypoint" placeholder="Via 1"> Remove
Bootstrap is telling the input to be 100% wide...so you'd have to adjust that.
JSfiddle With Bootstrap Demo
input.form-control.booking.waypoint {
width:50%;
display: inline-block;
}
<input type="text" class="form-control booking waypoint" placeholder="Via 1"/>
<label for="">Remove</label>
Try this:
#remove{
display:inline;
}
.booking{
width:50%;
display:inline;
}
<input type="text" class="form-control booking waypoint" placeholder="Via 1"> <p id="remove">Remove</p>
you can use .col-any class name.
For text box
col-lg-7
and for label
.col-lg-5
So i'm using a checkbox hack in order to change 3 buttons on click, when someone clicks one it changes to a selected button image, then someone clicks on another button it changes the other button back to the original image and the new other clicked button goes to select. The problem is I can't figure out how to have 3 different selected states. One for each color. Right now it just uses the greenbtn-selected obviously, how would I add more than one so that each button had it's own selected state?
Also for some reason content:url isn't working on Firefox? Is there another way to do it, I tried background:url and that doesn't work in Chrome! ugh.
Thanks so much!!!
The selected button images..
http://www.morecleanenergy.com/graphics/mass/images/greenbtn-select.png
http://www.morecleanenergy.com/graphics/mass/images/bluebtn-select.png
http://www.morecleanenergy.com/graphics/mass/images/orangebtn-select.png
The Buttons..
<label>
<input id="ctl00_generalContentPlaceHolder_rbPackage1" type="radio" value="rbPackage1" name="ctl00$generalContentPlaceHolder$product">
<img src="http://www.morecleanenergy.com/graphics/mass/images/greenbtn-select.png">
</label>
<label>
<input id="ctl00_generalContentPlaceHolder_rbPackage1" type="radio" value="rbPackage1" name="ctl00$generalContentPlaceHolder$product">
<img src="http://www.morecleanenergy.com/graphics/mass/images/orangebtn-select.png">
</label>
<label>
<input id="ctl00_generalContentPlaceHolder_rbPackage1" type="radio" value="rbPackage1" name="ctl00$generalContentPlaceHolder$product">
<img src="http://www.morecleanenergy.com/graphics/mass/images/bluebtn-select.png">
</label>
The CSS...
label > input + img {
cursor: pointer;
}
label > input {
position: absolute;
visibility: hidden;
width: 130px;
}
label > input:checked + img {
content: url("http://www.morecleanenergy.com/graphics/mass/images/orangebtn-selected.png");
}
label > input + img {
cursor: pointer;
}
label > input {
position: absolute;
visibility: hidden;
width: 130px;
}
label > input: checked + img {
content: url("http://www.morecleanenergy.com/graphics/mass/images/orangebtn-selected.png");
}
<label>
<input id="ctl00_generalContentPlaceHolder_rbPackage1" type="radio" value="rbPackage1" name="ctl00$generalContentPlaceHolder$product">
<img src="http://www.morecleanenergy.com/graphics/mass/images/greenbtn-select.png">
</label>
<label>
<input id="ctl00_generalContentPlaceHolder_rbPackage1" type="radio" value="rbPackage1" name="ctl00$generalContentPlaceHolder$product">
<img src="http://www.morecleanenergy.com/graphics/mass/images/orangebtn-select.png">
</label>
<label>
<input id="ctl00_generalContentPlaceHolder_rbPackage1" type="radio" value="rbPackage1" name="ctl00$generalContentPlaceHolder$product">
<img src="http://www.morecleanenergy.com/graphics/mass/images/bluebtn-select.png">
</label>
dont use image use a <div> or span
JS Fiddle
give a background image and use pseudo before changing the image
html
<label>
<input id="ctl00_generalContentPlaceHolder_rbPackage1" type="radio" value="rbPackage1" name="ctl00$generalContentPlaceHolder$product">
<span class="check-green"></span>
</label>
css
.check-green {
background:url(http://www.morecleanenergy.com/graphics/mass/images/greenbtn-select.png);
width:124px;
height:30px;
}
label > input:checked + span:before {
content: url("http://www.morecleanenergy.com/graphics/mass/images/orangebtn-selected.png");
display:block;
}
You can use Javascript and register a click event for each of the buttons. Something like this;
Jquery
$('button1').click(function(){
//do necessary changes
});
Just a quick question can a CSS radio button effect something outside the element it's in.
For example:
<div class="radio">
<input id="radio-green" type="radio" name="radio-b"/>
<label for="radio-green">Green</label>
<input id="radio-blue" type="radio" name="radio-b" checked />
<label for="radio-blue">Blue</label>
<input id="radio-yellow" type="radio" name="radio-b"/>
<label for="radio-yellow">Yellow</label>
<input id="radio-red" type="radio" name="radio-b"/>
<label for="radio-red">Red</label>
<input id="radio-white" type="radio" name="radio-b"/>
<label for="radio-white">White</label>
</div>
<div class="square"></div>
With the CSS something like this?
.square {
width:300px;
height:300px;
margin:0 auto;
background:red;
}
input#radio-green:checked .square {background:green;}
Or would I need to use JS?
Here's a JS fiddle http://jsfiddle.net/m8fxw/
Thanks
If they weren't inside their parent <div> you could do it, because they'd be siblings. Unfortunately CSS rules don't let you traverse back up the tree.
If you took them out the <div class="radio"> then you could use the ~ sibling combinator:
#radio-green:checked ~ .square {background:green;}
Demo
Otherwise, I'd probably use JS to add a class to the <div class="radio> when each radio was clicked and then style the square accordingly.
If you know jQuery, you can use:
$('input[type=radio]').click(function() {
var $this = $(this);
$('.square').css('background', $(this).next().text());
})
Updated Fiddle