I have HTML structure like this:
<div class="input__wrapper default__label__down">
<div class="input__unit__wrapper">
<input name="fabricColor" id="allegro_red_1" class="radioGroup__imageItem__input" type="radio" value="allegro_red_1">
<span class="input__unit">mm</span>
</div>
<label class="radioGroup__imageItem__label" for="allegro_red_1">
<img alt="allegro_red_1" src="IMG SRC" class="radioGroup__imageItem__label__image">
</label>
</div>
How can I using SASS check if input (of type radio) is checked and then style img tag inside label?
Related
In a django form, How can I wrap an input and its label?
I have django form with a BooleanField. That field renders like this:
<div id="..." class="custom-control custom-checkbox" style="">
<input type="checkbox"....>
<label for="...."....>
<div> help_text <div>
</div>
I want to wrap the input and the label but not the help text:
I want something like:
<div id="..." class="custom-control custom-checkbox" style="">
<div id="wrapper_div">
<input type="checkbox"....>
<label for="...."....>
</div>
<div> help_text <div>
</div>
I built a custom radio button using this structure. However using this configuration I cant click the text to toggle the radio, any ideas why this is not working?
<div class="form-group">
<label class="custom-control custom-radio">
<input id="pefrormanceRadio" name="bonusRangeRadio" type="radio" class="custom-control-input" value="pefrormanceRadio">
<span class="custom-control-indicator"></span>
</label>
<span class="custom-control-description">test</span>
</div>
You can achieve this by moving your text inside the label element.
Clicking a label will also click its associated form input. You can either associate a label and a form input with the 'for' HTML attribute (as per zmuci's answer) or by wrapping your input with the label element (which you are already doing).
In your case you were trying to click some text that was outside the label (hence not associated in any way with the input).
<div class="form-group">
<label class="custom-control custom-radio">
<input id="pefrormanceRadio" name="bonusRangeRadio" type="radio" class="custom-control-input" value="pefrormanceRadio">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">test</span>
</label>
</div>
You need to "connect" the text and input, you do that with for attribute added to label tag.
So your HTML should look something like this:
<div class="form-group">
<input id="pefrormanceRadio" name="bonusRangeRadio" type="radio" class="custom-control-input" value="pefrormanceRadio">
<label class="custom-control custom-radio" for="pefrormanceRadio">Test</label>
<span class="custom-control-indicator"></span>
</div>
Or if you can't change the HTML, Den Biswajit answer is the correct one. But you should be aware that from the semantic/accessible point of view, input should have a meaningful label.
Please add custom-control-description inside label and update css
<div class="form-group">
<label class="custom-control custom-radio">
<input id="pefrormanceRadio" name="bonusRangeRadio" type="radio" class="custom-control-input" value="pefrormanceRadio">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">test</span>
</label>
</div>
you can do this using jquery
$("label").click(function(){
$("#pefrormanceRadio").attr('checked', 'checked');
});
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 6 years ago.
I have a below set of input text elements in my page. I actually need to apply style to div element of "forms_in_ap" class containing the #email, #reEmail, #nogInFirstName, #nogInAccNumber elements alone, in Safari browser of all MAC and IOS devices.
CSS to apply style to specific elements of Specific Div:
html[xmlns*=""]:root
.form_input_wrap input#email,
.form_input_wrap input#reEmail,
.form_input_wrap input#nogInFirstName,
.form_input_wrap input#nogInAccNumber
{
height: 42px;
}
HTML Code:
<div class="asd removeFocus">
<div class="forms_in_ap removeFocus">
<label for="email">Email address</label>
<div class="removeFocus">
<input type="text" id="email" name="email" class="required error ">
<span id="email-error" class="error">Please enter a Valid Email Address.</span>
</div>
</div>
<div class="forms_in_ap removeFocus">
<label for="reEmail">Re-enter email address</label>
<div class="removeFocus">
<input type="text" id="reEmail" name="reEmail" maxlength="64">
</div>
</div>
</div>
<div class="form">
<div class="forms_in_ap">
<label for="nogInFirstName">First Name</label>
<div>
<input type="text" name="txtFName" maxlength="15" id="nogInFirstName">
</div>
</div>
<div class="forms_in_ap">
<label for="nogInLastName">Last Named</label>
<div>
<input type="text" name="txtLName" maxlength="15" id="nogInLastName">
</div>
</div>
<div class="forms_in_ap">
<label for="nogInAccNumber">Coupon Number</label>
<div>
<input type="text" name="shcCreditCardNumber" maxlength="19" id="nogInAccNumber">
</div>
</div>
<div class=" forms_in_ap">
<div class="ccvDiv">
<label for="cvv"> pin</label>
<div>
<input type="text" class="cvvWidth required" name="cvv" id="cvv" maxlength="3">
</div>
</div>
</div>
</div>
The above css works fine but not sure whether this is a correct, standard or optimize code please suggest me.
If you have access to the HTML you can simply add a new class to the divs that contain the input fields and that need to be modified. For example "modify-this", then style that class accordingly.
If your HTML is dynamic and might change, or if you can't modify the HTML directly for some reason, the second easiest way to achieve this is using some jQuery to add a class to the elements you want to modify, you can achieve this by using the .parent() function, like so:
$(document).ready(function () {
$('#email').parent('.forms_in_ap').addClass('modify-this');
$('#reEmail').parent('.forms_in_ap').addClass('modify-this');
$('#nogInFirstName').parent('.forms_in_ap').addClass('modify-this');
$('#nogInAccNumber').parent('.forms_in_ap').addClass('modify-this');
});
This will add the "modify-this" class to the divs that contain the 4 inputs with the IDs specified above. You can then style that class as normal.
Note that this works because each input is inside the div that you need to modify, meaning that the div is the parent of the input element. By entering the class "forms_in_ap" into the parent() function, we tell jquery to find the parent of the input that contains that class.
I've found a strange behavior in IE. When HTML code inside <form> tag it won't work.
<div>
<label>
<img src="media/afternoon-1.jpg" alt="">
<input type="checkbox" name="afternoon[]" value="1" />
</label>
</div>
http://jsfiddle.net/SiZE/nss7qz85/
Have test it in IE 11.0.9600.17842
Is it possible to fix it without JS?
How do you separate a <label> from its <input> in separate <div>s but still have them linked?
I have an input and a label, and they are in the same div, and the functionality works. If I move the input to a sibling div (sibling in the context of bootstrap), the toggle functionality doesn't work:
<div ng-repeat="uniqJokeType in uniqJokeTypes">
<div class="row">
<div class="col-md-7 col-md-offset-1">
<div class="type-filter-button" ng-class="jokeCssClasses(uniqJokeType)" ng-click="jokeTypeClick(uniqJokeType)">
<label ng-bind="uniqJokeType"></label>
<input type="checkbox" ng-model="uniqJokeType" class="js-switch" ui-switch checked />
</div>
</div>
<div class="col-md-3">
<!-- I want to move the <input> here, but it does not work when placed here -->
</div>
</div>
</div>
Also, is this more of an HTML context issue, or an angular (maybe scoping?) issue?
Just add a for attribute on the label and an id on your input :
<label ng-bind="uniqJokeType" for="myInput"></label>
<input type="checkbox" ng-model="uniqJokeType" class="js-switch" ui-switch checked id="myInput" />