I'm trying to style a label that has a checkbox inside of it. I want the label to change color when the checkbox is selected.
<label>
<input type="checkbox">
</label>
Using SASS and the ampersand, this should be possible with:
input {
background-color: red;
&:checked {
label & {
background-color: green;
}
}
}
I ran a test and this worked, however, this doesn't work in Shopify. In fact, Shopify doesn't seem to compile it at all. Am I missing something?
Selecting a parent is currently not supported in any major browser (no matter what CSS preprocessor you are using).
However if your label is on the same level as your checkbox, then you can use the sibling selector like so:
input:checked + label {
background: red;
}
<input id="aCheckbox" type="checkbox" />
<label for="aCheckbox">Test</label>
In terms of SCSS it should look something like (I haven't tested it though):
input {
background-color: red;
&:checked {
& + label {
background-color: green;
}
}
}
Related
This is my class -
.swatch input:checked + label {
background-color: #fff;
}
.swatch {
Change something here when above class is active.
}
Is there any way to do this? I am using liquid templating if that could be of assistance.
No.
It is possible for one ruleset to affect another using CSS variables…
body {
--example: yellow;
}
input:checked+.swatch {
--example: brown;
}
.swatch {
background: var(--example);
}
<input type="checkbox">
<div class="swatch">
Hello, world
</div>
… but that would only allow the variable to be set on the input, it's descendant (if inputs could have such things) or a later sibling.
There is no parent selector.
I have a <label> tag that wraps checkbox. I want to define a style to that label if the checkbox is checked. Until now I've been relying on JavaScript but I see that there is a :has selector that might do what I want with CSS only
Here is my HTML:
<label><input type="checkbox name="param1"> Param 1</label>
Here is what I'm attempting in CSS:
label:has(input[type='checkbox']:checked){
background-color: #ccc;
}
However, it breaks my SCSS compiler before I even get to test it in a browser. I'm guessing that there is a CSS syntax error. My editor does highlight it as though there is an error, but I can't see where I've gone wrong.
https://developer.mozilla.org/en-US/docs/Web/CSS/:has
You can use something like this:
input[type='checkbox'] {
display:none;
}
label{
height:30px;
width:30px;
border:1px solid red;
display:inline-block;
}
input[type='checkbox']:checked + label{
background-color: #000;
}
<input type="checkbox" id="id">
<label for="id"></label>
Yes, css have :has selector but No browser supports it.
I hope, this help to you:
input:checked + label {
color: red;
}
<input type="checkbox" name="param1" id="rad">
<label for="rad">Param 1</label>
If I apply the following rule to an input element with id #one then the placeholder color will change,
#one::-webkit-input-placeholder {
color: red;
}
But if I use comma separater to combine placeholder rules of different browsers then the color doesn't apply, e.g.
#two::-webkit-input-placeholder,
#two::-moz-placeholder{
color: red;
}
Working example:
#one::-webkit-input-placeholder {
color: red;
}
#two::-webkit-input-placeholder,
#two::-moz-placeholder{
color: red;
}
<input id="one" type="text" placeholder="one">
<input id="two" type="text" placeholder="two">
Why does the #two placeholder not change its color to red?
This is because a browser will only apply a rule form a selector it can fully interpret.
For a webkit type browser -webkit-input-placeholder is valid but -moz-placeholder is not, so it trashes the entire selector, and vise-versa for a geeko based browser.
The solution is to separate browser specific selectors.
#two::-webkit-input-placeholder{
color: red;
}
#two::-moz-placeholder{
color: red;
}
I know it is now a complete answer, but you could add different classes for each input
#one::-webkit-input-placeholder {
color: red;
}
#two::-webkit-input-placeholder{
color: red;
}
#two::-moz-placeholder{
color: red;
}
<input id="one" type="text" placeholder="one">
<input id="two" type="text" placeholder="two">
I've got an input box. I customise it in normal state and on focus.
My question is how do I keep the focus CSS styling if text is present in the input box?
.par input[type=sample]{
width:75px;
background-color: #000;
}
.par input[type=sample]:focus{
width:50px;
background-color: #FF0;
}
There are no pure CSS selectors to directly select and style text boxes based on their content. But if the field is a mandatory field (that is, you could add the required attribute) then the :valid pseudo selector can be used to identify if the text box has any text type inside it or not and based on it apply the required styles.
input[type=text] {
width: 75px;
background-color: #000;
}
input[type=text]:focus,
input[type=text]:valid {
width: 50px;
background-color: #FF0;
}
<input type="text" required />
<input type="text" required />
input[value=""]:focus {
background-color: yellow;
}
<input onkeyup="this.setAttribute('value', this.value);" value="" />
another way would be to check in jquery.. using ':contains' selector
you can have one more selector with :valid pseudo-class.
.par input[type=sample]:valid{
width:50px;
background-color: #FF0;
}
Is there any way to have a label respond to focus. I have some code where the textfield has a different style on focus. The label also however needs a slightly different style. I tried this but it did not effect the label.
#header .search label {
background:url(http://www.golfbrowser.com/images/icons/search.png) left top no-repeat;
padding-left:20px;
height:20px;
float:right;
}
#header .search label:focus {
background:url(http://www.golfbrowser.com/images/icons/search-z.png) left top no-repeat;
padding-left:20px;
height:20px;
float:right;
}
#header .search input {
padding:0px;
border:0px;
width:140px;
height:20px;
float:left;
padding-right:10px;
background:url(http://www.golfbrowser.com/images/icons/searchbar.png) right top no-repeat;
}
#header .search input:focus {
padding:0px;
width:190px;
height:20px;
float:left;
padding-right:10px;
background:url(http://www.golfbrowser.com/images/icons/searchbar-z.png) right top no-repeat;
}
The label contains an image and the other part of a round corner and it too must change colour in order for the field to look correct.
Any ideas,
Marvellous
You can't actually give focus to a label. It's not a focusable form element. Besides, even if you could do that, then whatever previously had focus (that means your input) would lose it to the label anyway.
You may have to restructure your HTML (and modify your CSS accordingly) so that you can select input:focus and then that input's corresponding label. For instance, if you moved your label after your input and used the following CSS selector for your label, you should be able to accomplish what you want.
#header .search input:focus + label
BoltClock's answer is the more semantic, lightweight way of achieving this functionality. However it's not always possible to have a specific HTML structure (especially to facilitate a minor feature like this) and CSS lacks the ability to traverse up the HTML hierarchy. To get around that, here are two alternatives. The first is coming soon (CSS spec 4) and the second is our old mate Javascript.
First up, CSS4's :focus-within pseudo selector. This does exactly what it says on the tin (scopes based on any child element's active focus state). Read more about the spec here. So assuming you have a HTML structure of:
<div class="input-wrapper">
<label for="elem">Label Text
<input name="elem" id="elem" type="text" />
</label>
</div>
you could scope the 'focussed' label by simply:
label:focus-within{}
by the same token, you could also scope the parent div with:
div.input-wrapper:focus-within{}
Magical. But not for use today :(
Second up, if you're already using a JS selector engine (i.e. jQuery, Sizzle, etc.), you could also do something along the lines of:
$('input').on("focus", function(){
var input = $(this);
// assuming label is the parent, i.e. <label><input /></label>
var label = $(this).parent();
label.addClass('focussed');
input.on("blur", function(){
label.removeClass('focussed');
input.off("blur");
});
});
This is untested but the essence of what this achieves is using a class rather than the :focus pseudo selector. So you can add your focussed styles to label.focussed{}. I've added (and self-removed) the blur handler to facilitate removing the class.
Now using Flex box will solve this. Have the label element follow the input element in the HTML. Then use flex-direction: column-reverse to change its position to appear above the input element. You can then use the input:focus + label: {} to target the label.
.input-container {
display: flex;
flex-direction: column-reverse;
}
.input-container > input {
/* your input styles */
}
.input-container > input:focus + label {
/* targets the label when the input receives focus */
color: red;
}
<div class="input-container">
<input type='email' />
<label>Email</label>
</div>
use:checked instead of :focus and you must give id,name,value into 'input'.
Found a good solution - order property made a trick:
input:focus {
background-color: #F2FFF0;
}
* {
font-family: "Arial";
font-size: 13px;
}
div.settings {
display:grid;
grid-template-columns: max-content max-content;
grid-gap: 7px
}
div.settings label {
text-align:right;
padding-top: 3px
}
div.settings label:after {
content: ":";
}
div.settings input:focus + label:before {
content: "\25B6 ";
font-size: 12px;
color: red;
}
input {
border: 1px solid #ccc;
padding: 2px 4px;
font-size: 13px;
}
<div class="settings">
<input style="order:2" type="text" title="(vardas, pavardė ir pan.)" autocomplete="off" id="name" name="name" required minlength="4" maxlength="128" size="50"><label style="order:1" for="name">Pirkėjas</label>
<input style="order:4" type="text" title="" autocomplete="off" id="company" name="company" required minlength="4" maxlength="128"><label style="order:3" for="company">Įmonės pavadinimas</label>
<input style="order:6" type="text" title="" autocomplete="off" id="companyCode" name="companyCode" required minlength="4" maxlength="128"><label style="order:5; min-width: 160px" for="companyCode">Įmonės (asmens) kodas</label>
</div>