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
Related
<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;
}
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;
}
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
I have some problem when i try to change the color of a div using input tags. If the div is in the same section of the inputs it works perfect. But if i try to put the div in the footer, for example, stop working.
HTML:
<section>
<input id="select1" name="test" type="radio" checked />
<label for="select1">Red</label>
<input id="select2" name="test" type="radio" />
<label for="select2">Green</label>
<input id="select3" name="test" type="radio" />
<label for="select3">Blue</label>
</section>
<footer>
<div class="colorDiv"></div>
</footer>
CSS:
.colorDiv{
width:50px;
height:50px;
background-color:red;
}
#select2:checked ~ .colorDiv{
background-color:green;
}
#select3:checked ~ .colorDiv{
background-color:blue;
}
Here is an example: http://jsfiddle.net/cqscc48g
There is any way to achieve that?
Thanks
Css is a cascading renderer. So it follows the DOM element's structure. Therefore, you can only relate elements that are descendants or, at least following siblings.
You have two options:
1 - Adjust your HTML:
You don't even need to put the div inside the input's section. But at least, you'd have to let the inputs out of the section, to make a "nephew" selector. (of course this denomination does not exists ;) )
JsFiddle - Changin HTML
<input id="select1" name="test" type="radio" checked />
<label for="select1">Red</label>
<input id="select2" name="test" type="radio" />
<label for="select2">Green</label>
<input id="select3" name="test" type="radio" />
<label for="select3">Blue</label>
<footer>
<div class="colorDiv"></div>
</footer>
And then you can select:
#select2:checked ~ footer .colorDiv{
background-color:green;
}
#select3:checked ~ footer .colorDiv{
background-color:blue;
}
2 - Use a Javascript approach:
If you love your HTML structure so much, then you must go Javascript. You can make it a lot sharper, but just an example:
JsFiddle - Using Javascript
function ChangeColor(color) {
var clrDiv = document.getElementsByClassName("colorDiv")[0];
clrDiv.style.backgroundColor = color;
}
document.getElementById("select1").onclick = function() { ChangeColor(""); }
document.getElementById("select2").onclick = function() { ChangeColor("green"); }
document.getElementById("select3").onclick = function() { ChangeColor("blue"); }
Change your markup and go through comments in code,
.colorDiv {
width: 50px;
height: 50px;
background-color: red;
}
#select2:checked~.colorDiv {
background-color: green;
}
#select3:checked~.colorDiv {
background-color: blue;
}
<section>
<input id="select1" name="test" type="radio" checked />
<label for="select1">Red</label>
<input id="select2" name="test" type="radio" />
<label for="select2">Green</label>
<input id="select3" name="test" type="radio" />
<label for="select3">Blue</label>
<div class="colorDiv"></div>
<!-- this should be adjacent as per your css selectors -->
</section>
Fiddle
If you want click inside somewhere div and hover any of body div than set input at the top outside..
<style>
input[type=checkbox] {
display:none;
}
input[type=checkbox]:checked ~ div.content{
display:none;
}
</style>
<input type="checkbox" id="toogle-content"/>
<div>
<label for="toogle-content" id="toogle-content">CLICK ME!</label>
</div>
<div class="content">
I can toggle now ;)
</div>
Use .change() for every input. On change check id from clicked input and then change color of that div
How can I align button right next to my input text. Example here
HTML
<div id="frm">
<label>Select an Item:
<input type="text" /><input type="button" value="..." class="open">
</label>
<label>Price:<input type="text" /></label>
CSS
#frm label
{
display:block;
float:left;
padding-right:6px;
}
#frm input
{
display:block;
}
Edit
I want my form elements horizontally aligned in blocks & I like the popup button to align with just one textbox.
I'd suggest to move the <input> outside the <label>, like this:
<div id="frm">
<div class="group">
<label for="item">Select an Item:</label>
<input type="text" id="item" />
<input type="button" value="..." class="open">
</div>
<div class="group">
<label for="price">Price:</label>
<input type="text" id="price" />
</div>
</div>
If you want to separate the inputs from the label, you should place the label text inside an own element, and not mix label text and input into a common tag.
Then, you can use the following CSS:
#frm .group {
display: block;
float: left;
padding-right: 6px;
}
#frm label {
display:block;
}
See how it looks like, is this what you want?
-Easiest way to solve your problem, is to remove all CSS - input is inline by default, so it won't wrap to the next line if you add no CSS.
-And I'd add an extra div to make sure your fields are on seperate lines, no CSS needed either.
Like this:
<div id="frm">
<div class="field">
<label>Select an Item:</label>
<input type="text"><input type="button" value="..." class="open">
</div>
<div class="field">
<label>Price:</label>
<input type="text">
</div>
</div>
http://jsfiddle.net/ckfZE/15/
http://jsfiddle.net/ckfZE/18/
added a span-tag though
This CSS is causing that conflict:
#frm input {
display:block;
}
You could set .open to display:inline to fix this.
Be a little more specific with your question. If you took the CSS out completely they would be aligned right next to each other. If you want them on separate lines add a <br/> after the text input.