<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;
}
Related
I'm trying to hide parents pseudo element ::before hide on input focus and it shouldn't work on button focus. Currently it looks like this
.parent::before{
content: 'default';
}
.parent:focus-within::before{
display: none;
}
<div class="parent">
<input type="text">
<button>awd</button>
</div>
and it doesn't seem to work. I don't want to involve any js/jquery. Would be great if there any vanila css or atleast scss solution.
Thanks in advance!
You can't do that with parent focus to control pseudo element, cause button and input both trigger focus on parent, you can't approve one and disapprove another. Instead, you can wrap input to do that.
label::before{
content: 'default';
}
label:focus-within::before{
display: none;
}
<div class="parent">
<label>
<input type="text">
</label>
<button>awd</button>
</div>
<s:checkboxlist list="fruits" name="selectfruits" listKey="id" listValue="description" id="fruitsid">
Suppose I have the above checkboxlist that contains multiple checkboxes. I would like to change the background color to grey and the color of the label to white when the mouse hovers upon the respective checkbox or its label. How would I achieve this by changing its style in the css?
I tried the following in the css file by referring the checkboxlist's id but it does not work:
#fruitsid:hover {
color:white;
background-color:grey;
}
The generated HTML for the above code:
<input type="checkbox" name="selectfruits" value="Apple" id="selectfruits-1">Apple
<br/><br/></input>
<input type="checkbox" name="selectfruits" value="Melon" id="selectfruits-2">Guava
<br/><br/></input>
<input type="checkbox" name="selectfruits" value="Orange" id="selectfruits-3">Orange
<br/><br/></input>
<input type="checkbox" name="selectfruits" value="Guava" id="selectfruits-4">Grapefruit
<br/><br/></input>
<input type="checkbox" name="selectfruits" value="Pineapple" id="selectfruits-5">Melon
<br/><br/></input>
Is there any way where you can refer each label and change its css style like the one mentioned above?
Thanks!
You can use CSS3 startswith selector:
input[id^="selectfruits"]:hover{
/* your custom style here */
}
BTW checkboxes (and radiobuttons too) are special items, rendered differently basing on Browser / Operative System, and hard to style with CSS only.
The snippet above is correct to target an item (even a checkbox or a radiobutton), but the problem is that then you can't do what you ask. You could change the size or the position, for example, but not the color / background-color, because they don't have those properties.
There are several solutions to this, but the two most famous are:
Hiding the real checkbox and then showing another element (a span with an image, usually):
This is used when a crossbrowser/cross-OS rendering is mandatory, and/or when there is the need to show a better / different graphical object (I've used checkboxes with lock/unlock symbols, for example). But I guess it's not your case.
Wrapping the checkbox in another element (eg. a div) and then styling that element:
this appears to be your case. There is no need to wrap it in a div, btw, a label element next to the checkbox is enough for your case. The problem is that <s:checkboxlist/> tag is generating the HTML for you, without the labels, then you should avoid using this tag in order to be able to add your custom HTML;
change your tag with single checkboxes tags generated inside an iterator... or just with plain HTML elements, to keep it simple:
<s:iterator value="fruits" status="ctr">
<input type="checkbox"
name="selectfruits"
class="chkFruits"
value="<s:property value='%{id}'/>"
id="selectfruits-<s:property value='%{#ctr.count}'/>">
<label for="selectfruits-<s:property value='%{#ctr.count}'/>" class="lblFruits">
<s:property value='%{description}'/>
</label>
<br/><br/>
</s:iterator>
that will generate the following output, that you can style with standard selectors:
.chkFruits:hover + .lblFruits {
background-color: blue;
color: white;
}
<input type="checkbox" name="selectfruits" value="AWARD"
id="selectfruits-1" class="chkFruits" />
<label for="selectfruits-1" class="lblFruits">Apple</label>
<br/><br/>
<input type="checkbox" name="selectfruits" value="CLIST"
id="selectfruits-2" class="chkFruits" />
<label for="selectfruits-2" class="lblFruits">Guava</label>
<br/><br/>
<input type="checkbox" name="selectfruits" value="HAN"
id="selectfruits-3" class="chkFruits" />
<label for="selectfruits-3" class="lblFruits">Orange</label>
<br/><br/>
<input type="checkbox" name="selectfruits" value="POS"
id="selectfruits-4" class="chkFruits" />
<label for="selectfruits-4" class="lblFruits">Melon</label>
<br/><br/>
This answer works for all check in my webpages!
input[type="checkbox"]:hover + label {
color: #fff;
border-color: #1b7aa9;
background-color: #239fdb;
}
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
i would like to apply a specific css to a specific label in my html
this is my HTML
<div id="registration">
<div>
<label>Localisation</label>**//this is the target label to apply css**
<div id="registration_localisation">
<div>
<label>Gouvernorat</label>
<select id="registration_localisation_gouvernorat">
<option value="1">Ariana</option>
<option value="2">Ben Arous</option>
<option value="3">Bizerte</option>
</select>
</div>
<div>
<label for="registration_localisation_ville">Ville</label>
<input type="text" id="registration_localisation_ville">
</div>
</div>
</div>
<div>
<label>Annonceur</label>**//this is the target label to apply the css**
<div id="registration_annonceur">
<div>
<label for="registration_annonceur_Nom">Nom</label>
<input type="text" id="registration_annonceur_Nom">
</div>
<div>
<label for="registration_annonceur_Email">Email</label>
<input type="text" id="registration_annonceur_Email">
</div>
<div>
<label for="registration_Telephone" >Telephone</label>
<input type="text" id="registration_annonceur_Telephone">
</div>
</div>
</div>
</div>
i used many pseudo classes but i didn't find any solution
any idea please ?
try this way where you can style all your label inside the div contained into registration
#registration > div > label{
//your css
}
DEMO
Just give it a class. Classes may be repeated in HTML, like;
<label class="class1">Localisation</label>
and in your css,
.class1{
//styling
}
CSS3 way
#registration div label:first-child {
// specific styles for just the first label item
}
Or
#registration div label:nth-first-of-type{
// specific styles for just the first label item
}
jQuery Way
<script>
$( "#registration div label:first" ).css( "font-style", "italic" );
</script>
How about
#registration > div > label:first-of-type {}
?
Match labels who are the first, direct child of a div.
div > label:first-child {}
Actually it would be much better if you could add some classes to your elements. Matching wide selector such as div is a bad idea for future maintainability. Changing your markup will break your style.
Basically is what is says in the tin.
I have an input tag and independent javascript to control it. When they user is inserting data it changes one of its' classes automatically so that its color is changed by CSS which is defined elsewhere Until then everything is ok. Next: I want the whole div that contains that input to change color so that the user can be warned when something is wrong. There's a problem here: How can I select that div I want to select only using CSS?
Here's some code that works for the input:
input.wrongVal {
border-color: red;
background-color: red;
}
input.wrongVal:active{
background-color: white;
}
Here's the relevant code from the page:
<div class="infoinputContainer">
<p class="inputLine">
<span>
<input type="text" id="data">
<label for="data">Data info</label>
</span>
</p>
</div>
How can I, with only CSS, select for styling the div shown here (and no other div) with, for instance, another background?
You can't do that with CSS. What you can do however is use Javascript to either change the class of the div container or wrap the div container into another div.
<div class="infoinputContainer invalid">
<p class="inputLine">
<span>
<input type="text" id="data">
<label for="data">Data info</label>
</span>
</p>
</div>
or:
<div class="invalidInput">
<div class="infoinputContainer">
<p class="inputLine">
<span>
<input type="text" id="data">
<label for="data">Data info</label>
</span>
</p>
</div>
</div>
You can't. Not with pure CSS.
CSS selectors only select/target children or descendants for performance purposes: if you could target :parent (like in jQuery) the browser would have to wait to render any of the page until it had processed all child nodes.
You'll have to use JavaScript instead.
You can't with just css.
What are you using to change the class when a user enters information? If it's javascript, you can use that to change the class of the parent (or grandparent) as well.