I have a custom checkbox that is an svg sprite in my HTML layout. Everything works fine, I styled everything with scss. Expect I can't figure out what selectors to use to change the color property of .checkbox__icon when .checkbox__input:checked. I've tried everything but nothing seems to work. Is there a way to do it without JS? P.S. I set the fill of the svg to currentColor and the color does change when I do it manually, so that's not the problem. The problem is I don't know what selectors to use here. Thanks!
<label class="checkbox">
<svg class="checkbox__icon icon icon--checkbox">
<use xlink:href="public/images/icons/sprite.svg#icon-checkbox-icon"></use>
</svg>
<input
type="checkbox"
name="checkbox"
id="checkbox"
class="checkbox__input"
checked
>
</label>
If you cannot place icon after input checkbox
.checkbox:has(input:checked) .checkbox__icon{
color: red;
}
If you can move icon after input checkbox
<label class="checkbox">
<input type="checkbox" name="checkbox" id="checkbox" class="checkbox__input" checked>
<svg class="checkbox__icon icon icon--checkbox">
<use xlink:href="public/images/icons/sprite.svg#icon-checkbox-icon"></use>
</svg>
</label>
input:checked + .checkbox__icon{
color: red;
}
Related
I'm having trouble figuring out how to add custom CSS to add spacing between a checkbox and text ( Ship to a different address?). Anytime I add margin or padding the whole element (checkbox + text) is moved. See picture attached?
Thanks for your help!
https://roynattivmd.com/checkout/
Checkbox and text:
You could add some spacing by adding margin-right: [value]; to the specific input. Since you are using elementor, you might do this via inline-styles.
<label for="myInput">
<input id="myInput" type="checkbox" style="margin-right: .5rem;">
Ship to a different address?
</label>
Or via an external stylesheet:
#myInput {
margin-right: .5rem;
}
<label for="myInput">
<input id="myInput" type="checkbox">
Ship to a different address?
</label>
Please try this code,To Spacing between checkbox and text?
dd label input {
margin-right:10px;
}
<dd id="rr-element">
<label for="rr-1">
<input type="checkbox" value="1" id="rr-1" name="rr[]">
Value 1
</label>
</dd>
I hope this code will be useful.
Thank you.
<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;
}
<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;
}
I have this HTML:
<input type="radio">
<span class="label">
<label id="options_34537_2label" for="options_34537_2">
</label>
</span>
Now I also have some CSS, which hides the radio button itself and puts an image in front of my label.
input[type="radio"] {
display: none;
}
label:before {
background: url("someimage.jpg") no-repeat scroll 0 0 transparent;
}
In IE and FF I can click the image to select the option, in Chrome, clicking does not work at all. Any idea how to solve this issue?
Thanks!
You should put the <input> inside the <label> to make it cliquable:
<label><input type="radio"></label>
And use the background property on your label directly, instead of using the :before pseudo-class. Then add some text or specify a width to show your background.