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.
Related
I'm having a hard time getting the labels on this form to line up beside the checkboxes. I'm using React with React-Hook-Form for validation and state management (here's the github: https://github.com/cipdv/ciprmt-mern/blob/main/client/src/components/User/HHForm/RFHHHForm.js if that helps, the file with the form is called RFHHHForm.js).
I've tried a few things:
I tried using semantic ui's library like this:
<div className='inline field'>
<div className='ui checkbox'>
<input defaultChecked={healthHistory?.epilepsy} name="epilepsy" type="checkbox" id="epilepsy" {...register('epilepsy')} />
<label>Epilepsy</label>
</div>
<div className='ui checkbox'>
<input defaultChecked={healthHistory?.diabetes} name="diabetes" type="checkbox" id="diabetes" {...register('diabetes')} />
<label>Diabetes</label>
</div>
When I used this, the label and checkboxes line up, but for some reason the checkboxes become uneditable (can't be checked or unchecked).
I tried making my own css stylesheet module like this:
input[type="checkbox"]
{
vertical-align:middle;
}
label,input{
display: inline-block;
vertical-align: middle;
}
But this didn't seem to work at lining anything up.
You can try to wrap the input inside the label
<label>Diabetes <input defaultChecked={healthHistory?.diabetes} name="diabetes" type="checkbox" id="diabetes" {...register('diabetes')} /></label>
or with your checkbox class you can
.checkbox{
display: flex;
align-items: center;
}
let me know if it worked.
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;
}
Here is my radio button code in struts tag, the space between radio button and radio button text box is congested how to give space between them
<div class="form-group">
<label class="col-lg-3 control-label">Gender</label>
<div class="col-lg-5">
<div class="btn-group" data-toggle="buttons">
<s:radio name="studentDTO.s_gender" id="gender" list="{'Male','Female'}" />
</div>
</div>
</div>
Many HTML elements have a default margin setting. You can override this and set it to 0. In your case, you want to reset margin-right on the radio button:
<input type="radio" name="beds" value="1" style="margin-right: 0" />1+
You probably want to add it to your stylesheet so that it applies to all radio buttons:
input[type="radio"] {
margin-right: 0;
}
I know this is an old question but to do this in Struts 2 use the cssStyle attribute if you only want it to apply to this group of radio buttons.
<s:radio name="studentDTO.s_gender" id="gender" list="{'Male','Female'}" cssStyle="margin-right:20px" />
Or you can use the cssClass attribute.
<s:radio name="studentDTO.s_gender" id="gender" list="{'Male','Female'}" cssClass="radioMarginRight" />
with
.radioMarginRight{
margin-right: 20px !important;
}
Both of these apply the CSS to the radio button and the label. To keep the margin from applying to the label with the cssClass attribute you could define the following CSS to set the label margin to 0.
label.radioMarginRight{
margin-right: 0px !important;
}
I dont know struts, but looking at this have you tried:
list="{' Male ',' Female '}"
Just putting some spaces between each of the '.
Its what you do in HTML + CSS so might work there
<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'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;
}