I'm developing a MVC3 application and need to select the checkboxes label.
In ASP MVC3 you have helper methods which creat a part of the code. So the code for a checkbox looks like this:
<input id="Jumping_successleicht" type="checkbox" value="true" name="Jumping_successleicht">
<input type="hidden" value="false" name="Jumping_successleicht">
<label for="Jumping_successleicht">
<span>leicht (4)</span>
</label>
Now I've thought I can use following code to select the label:
input[type=checkbox] + label {
background: url("../../Images/Controls/Checkbox.png") no-repeat scroll left center transparent;
clear: none;
cursor: pointer;
margin: 0;
padding: 5px 0 4px 24px;
}
But it does not work. It looks like label and input have to be next to each other.
Does any ony have a solution how to solve this problem?
There is no CSS selector that can be used to select the target of a <label for="#"> element universally. The + selector is the "adjacent sibling" selector.
There are a few workarounds:
Put the <input> element directly within the <label> element (you won't need the for="" attribute, that way).
Seeing as each <input /> needs to have a unique id="" attribute set in order to use <label for="">, just select the checkboxes by their IDs in the stylesheet.
Assign classes for each of the appropriate inputs.
Create wrappers around each input and its label.
Maybe you can try this?
input[type="checkbox"] + label{
background-color:red;
}
Related
I have a Angular project with .Net core and I'm using Clarity as well, I was wondering if there is a way to change the color of a Clarity toggle switch?
my code that I've tried so far which was not working:
<input type="checkbox" formControlName="validateAll" Color="red" clrToggle />
<input type="checkbox" formControlName="validateAll" style="background-color:red" clrToggle />
<input type="checkbox" formControlName="validateAll" style="color:red" clrToggle />
Add a custom class to the wrapping div, change the styles to the input as it's said in the documentation
The toggle switch is created by using ::before and ::after on the label tag. So if you name your wrapper class for the div custom-styles then your css should look like this:
.custom-styles input[type=checkbox]+label::before {
border-color: blue;
background-color: blue;
}
and for checked
.custom-styles input[type=checkbox]:checked+label::before {
border-color: red;
background-color: red;
}
I want to disable the label associated with checkbox. The code snippets are below:
code:
<label for="label1" class="form-checkbox-left"><input type="checkbox" name="labelname" id="label1" value="0" style="min-width: 20px;" disabled>Name 1</label>
css :
.form-checkbox-left input[type=checkbox]:disabled {
color:#ccc;
}
Somehow it is not working.
Please help
You can opt to use the element+element Selector. You need to place the input before the label, however
input[type=checkbox]:disabled+label {
color: #ccc;
}
<input type="checkbox" name="labelname" id="label1" value="0" style="min-width: 20px;" disabled>
<label for="label1" class="form-checkbox-left">Name 1</label>
you can try to do with jquery using
if ($('label1'.hasAttribute('disabled')){
$('[for="label1"]').attr('disabled', 'disabled');
}
at [for="label1"] you can put the id of lable ("if you want to")
I have just double-checked with Firefox, and adding any sort of a style definition to a checkbox doesn't change any aspect of its appearance.
It seems that you are out of luck here and would have to take a different approach by hiding the checkbox itself (not with display: none;, but with visibility: hidden; instead) and then add auxiliary CSS to actually customize its appearance.
An example on how to do this can be found on http://cssdeck.com/labs/css-checkbox-styles
Maybe that helps you derive a method that suits you best.
EDIT
If you are attempting to style the parent label of the checkbox, you are out of luck, because parent element selectors are not implemented in CSS so far, although a proposal has been made (see https://shauninman.com/archive/2008/05/05/css_qualified_selectors for details).
EDIT 2
You could try this by moving the label definition behind the checkbox definition:
<input type="checkbox" name="labelname" id="label1" value="0" style="min-width: 20px;" disabled><label for="label1" class="form-checkbox-left">Name 1</label>
Then your CSS should look like this to facilitate the change:
input[type="checkbox"][disabled] + label {
color: #ccc;
}
This in turn modifies the text of your label.
I am using the Spring form tag library in one of my projects and encountered the following problem:
I need to call a JavaScript function onmouseup on the label to a checkbox.
The problem is with the Spring form:checkbox tag the output then looks like this
<input id="id" name="name" value="true" type="checkbox">
<input name="_name" value="on" type="hidden">
<label for="id" onmouseup="func()" >blabla</label>
Due to my style.css which uses the + selector to get the label after a checked checkbox I need something like:
<input id="id" name="name" value="true" type="checkbox">
<label for="id" onmouseup="func()" >blabla</label>
<input name="_name" value="on" type="hidden">
But because I want to call a function onmouseup on the label, the label attribute to the form:checkbox tag won't work either.
My input is surrounded by a div so basically using the label attribute on the form:checkbox with the onmouseup call on the div would work but it feels kinda hacky.
So to sum it up I need either a different way to get my CSS to work or a way to achieve the above mentioned HTML structure using Spring.
The CSS (the rest is just styling which should not be important but I will post it if it'll help just let me know):
.switch input[type="checkbox"]:checked + label:after{
left: 23px;
}
.switch input[type="checkbox"]:checked + label{
background-color: #fff;
}
If I correctly understood your question, here is your solution: https://jsfiddle.net/DiogoBernardelli/rLutkcx0/
I added the input[type="hidden"] between checkbox and label.
The code will look like:
.switch input[type="checkbox"]:checked + input[type="hidden"] + label:after{
left: 23px;
}
.switch input[type="checkbox"]:checked + input[type="hidden"] + label{
background-color: #fff;
color: #f00; //just to emphasize the label
}
I'm trying to style the first legend element within nested fieldsets, but none of the CSS selectors I used achieve what I'm after.
http://codepen.io/anon/pen/epodxd
I basically want to style the first legend element without using any additional CSS class if possible.
<fieldset class="nested-parent">
<legend>Parent</legend>
<input type="text" size="10" />
<fieldset>
<legend>Child</legend>
<input type="text" size="20" />
</fieldset>
</fieldset>
.nested-parent legend:first-child {
color: red;
}
Based on the HTML you provided, you could use the child selector, > in order to select the first legend element that is a direct child of the .nested-parent element:
.nested-parent > legend:first-child {
color: #f00;
}
I would suggest using the :first-of-type pseudo class instead though. It will be more accurate when dealing with the element's types.
Example Here
.nested-parent > legend:first-of-type {
color: #f00;
}
I have 2 inputs (for email and phone) and a button. I want to use rule for button only if input[type="tel"]:valid and input[type="email"]:valid at the same time, but I can't do it correctly. Is there a way of doing this using css?
Try something like this:
input[type='tel']:valid ~ input[type='email']:valid ~ button {
color: green;
}
This assumes that the two input fields and the button are direct siblings.
Your question is not clear. However I try to answer
CSS:
:valid selector is normally on a input element where the user types data and if its a valid type it shows the css style for :valid and css style for :invalid if invalid.
input[type="tel"]:invalid, input[type="email"]:invalid {
border: 2px solid red;
}
input[type="tel"]:valid, input[type="email"]:valid {
border: 2px solid green;
}
The button is normally used to submit the form. If the inputs are part of form element than the browsers validates the form before submission. You can also use javascript to validate the form before submission by adding onsubmit="return validateForm()".
<form action="demo_form.asp" method="post" **onsubmit="return validateForm()"**>
<input type="tel" name="telephone" required>
<input type="email" name="email" required>
<input type="submit" value="button">
</form>