How can I add a CSS style to this Radio button's IMG, based on the checked="checked" characteristic?
<div id="edit-attributes-24-42-wrapper" class="form-item">
<label for="edit-attributes-24-42" class="option">
<input type="radio" class="form-radio" checked="checked" value="42" name="attributes[24]" id="edit-attributes-24-42">
<img class="radio_image" src="/sites/default/files/imagecache/radio_thumb/days-3.png">
<div class="radio_image_text">
Radio Button text, hidden by display:none in CSS
</div>
</label>
</div>
Ideally, I'd like to add a style class "selected" to the <img class="radio_image" src="/sites/default/files/imagecache/radio_thumb/days-3.png"> portion of the code.
You can't add a class with CSS only, but you could target the element you want with:
input[checked=checked] + img{
/* style here */
}
giving it the same style as your selected class.
jsFiddle example
Checked attribute itself qualifies for selection of radio.
input.form-radio:checked + img {
border:5px solid;
}
Fiddle
Sample Html
<div id="edit-attributes-24-42-wrapper" class="form-item">
<label for="edit-attributes-24-42" class="option">
<input type="radio" class="form-radio" value="42" name="attributes[24]" id="edit-attributes-24-42">
<img class="radio_image" src="/sites/default/files/imagecache/radio_thumb/days-3.png">
<div class="radio_image_text">Radio Button text, hidden by display:none in CSS</div>
<input type="radio" class="form-radio" value="42" name="attributes[24]" id="edit-attributes-24-42">
<img class="radio_image" src="/sites/default/files/imagecache/radio_thumb/days-3.png">
<div class="radio_image_text">Radio Button2 text, hidden by display:none in CSS</div>
</label>
</div>
Normally, each browser render the radio with its own shape.
you can use this for help styling radio buttons at the top of the below link:
http://metroui.org.ua/forms.php
Related
I am trying to color the inside of my radio button when its checked, so I have this html:
<div class="form-check">
<label>
<input
class="form-check-input"
type="radio"
name="myradio">
Text here
</label>
</div>
And this css:
.form-control-input:checked~.form-control-label::before {
color: #fff;
border-color: #7B1FA2;
}
The above css is not coloring it.
How can I do this?
I have a webpage utilizing the current bootstrap. It displays a label and text input box part of a form.
If I include the class="custom-control-input" to the input text field, Bootstrap hides it. Why?
If I don't include, it shows up, but it won't fulfill the full width according to its parent div tag.
The code is:
<div class="container">
<form class="needs-validation" novalidate action="submit_transgene_entry.php" method="post">
<div class="row">
<div class="col-md-2 mb-3">
<label for="comments_fieldID1">field below is shown, but won't extend full width</label>
</div>
<div class="col-md-10 mb-3">
<input type="text" id="comments_fieldID1" name="comments_fieldName">
</div>
</div>
<div class="row">
<div class="col-md-2 mb-3">
<label for="comments_fieldID2">the following field is hidden by custom-control-input</label>
</div>
<div class="col-md-4 mb-3">
<input type="text" id="comments_fieldID2" class="custom-control-input" name="comments_fieldName">
</div>
</div>
<div class="row">
<div class="col-md-3 mb-3">
<input type="submit" name='accept_transgene_entry' class="btn btn-primary btn-lg btn-block" value="Accept Transgene Entry" alt="Accept Transgene Entry"/>
</div>
</div>
</form>
</div>
You can see the code in action at this page
You must use the form-control class instead of custom-control-input.
I've edited your fiddle:
https://jsfiddle.net/2orbj50v/
Just add this in your CSS
#comments_fieldID1 {
width:100%;
}
Reason Behind Hiding this the class "custom-control-input" have some default css value from bootstrap like this, if you change the opacity 1 instead of 0 it will show the original field.
.custom-control-input {
position: absolute;
z-index: -1;
opacity: 0;
}
to make the input field full width just add this css
#comments_fieldID1 {
width:100%;
}
That may be because bootstrap 4 provide customized form elements for
Checkbox
Radio button
Range
Select
Upload
Toggle
And for these to work you have to wrap it around a <div> with class="custom-control custom-checkbox". The following is the example if you want to use custom-checkbox. But it won't work if you replace checkbox with text
<div class="custom-control custom-checkbox mb-3">
<input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
<label class="custom-control-label" for="customCheck">Custom checkbox</label>
</div>
And for your first input box, you can simply make it's with to be 100%. Like shown below:
#comments_fieldID1{
width:100%;
}
Best Answer : Use form-control for your #comments_fieldID1 element
Or you can add css in your css file :
#comments_fieldID1 {
width: 100%;
}
I'm trying to center a group of inline radiobuttons on my webpage but can't seem to override Claritys' CSS styling.
I've tried placing the clarity code inside a parent DIV tag using align-text:center, align-content:center, align-items: center, using a FIELDSET tag. But none of these have worked so far
<fieldset style='text-align: center'>
<div class="clr-form-control">
<div class="clr-control-container clr-control-inline">
<div class="clr-radio-wrapper">
<input type="radio" id="vertical-radio1" name="radio-full" value="option1" class="clr-radio">
<label for="vertical-radio1" class="clr-control-label">option 1</label>
</div>
<div class="clr-radio-wrapper">
<input type="radio" id="vertical-radio2" name="radio-full" value="option2" class="clr-radio">
<label for="vertical-radio2" class="clr-control-label">option 2</label>
</div>
<div class="clr-radio-wrapper">
<input type="radio" id="vertical-radio3" name="radio-full" value="option3" class="clr-radio">
<label for="vertical-radio3" class="clr-control-label">option 3</label>
</div>
</div>
</div>
</fieldset>
The radiobuttons should be centered in the page.
One approach would be to add your own css class to the clr-control-container and set the following for its css:
.app-centered-radios {
width: 100%;
justify-content: center;
}
Here is a stackblitz with centered inline radio buttons: https://stackblitz.com/edit/so-56050259-center-inline-radio-buttons
I was trying to do this with jquery (How do I get javascript to run more than once?) but some people said it can be done easier with CSS. Right now I have JS that dynamically adds and removes the ez-selected class as seen below whenever a radio button is selected. This is used to replace the buttons with images.
Is there any way to use CSS so that when the ez-selected class is added, it turns the text in the span tag to bold and then removes the bold when the ez-selected class is removed? I cannot change the HTML structure as it's coded in my shopping cart software. Thanks!
EDIT: Is there any kind of CSS selector that can style the span closest to the input checked? I know with + it can select an element right after another element, but is there a way to just select the next span element after a checked radio button even if that span is in another div?
<div class="row">
<input name="TXT870" type="hidden" value="Option 1">
<div class="col-xs-2">
<div class="ez-radio (ez-selected)">
<input class="clearBorder ez-hide" name="CAG3" onclick=
"javascript:document.additem.CAG3QF1.value='1'; CheckPreValue(this, 2, 0);"
type="radio" value="870_625_0_625">
</div><input name="CAG3QF1" type="hidden" value="0">
</div>
<div class="col-xs-7">
<span>Option 1</span> <input class="transparentField" name=
"CAG3TX1" readonly size="14" type="text" value=" - Add $5.00">
</div>
</div>
The .ez-selected div is not a previous sibling or parent of the span...so NO...you can't.
Not with this structure
<div class="row">
<input name="TXT870" type="hidden" value="Option 1">
<div class="col-xs-2">
<div class="ez-radio ez-selected">
<input class="clearBorder ez-hide" name="CAG3" onclick=
"javascript:document.additem.CAG3QF1.value='1'; CheckPreValue(this, 2, 0);"
type="radio" value="870_625_0_625">
</div><input name="CAG3QF1" type="hidden" value="0">
</div>
<div class="col-xs-7">
<span>Option 1</span> <input class="transparentField" name=
"CAG3TX1" readonly size="14" type="text" value=" - Add $5.00">
</div>
</div>
You would have to travel up the DOM first and you can't do that with CSS because there is no parent selector
My code as follows, generated by a software and I cannot change any of the values.
<div class="cred-field cred-field-ticket-month-or-course">
<div class="cred-label">Month or Course</div>
<div id="cred_form_3584_1_wpcf-ticket-month-or-course-radios" class="myzebra-radios">
<div class="myzebra-radios-single">
<label class="myzebra-style-label">
<input id="cred_form_3584_1_wpcf-ticket-month-or-course_wpcf-fields-radio-option-a6da15467aeb84f539c0dc1cd766ccd6-2" class="myzebra-control myzebra-radio myzebra-prime-name-wpcf-ticket-month-or-course" type="radio" checked="checked" value="wpcf-fields-radio-option-a6da15467aeb84f539c0dc1cd766ccd6-2" name="wpcf-ticket-month-or-course">
<span class="myzebra-radio-replace"></span>
</label>
<label id="cred_form_3584_1_label_wpcf-ticket-month-or-course_wpcf-fields-radio-option-a6da15467aeb84f539c0dc1cd766ccd6-2" for="cred_form_3584_1_wpcf-ticket-month-or-course_wpcf-fields-radio-option-a6da15467aeb84f539c0dc1cd766ccd6-2">per month</label>
</div>
<div class="myzebra-radios-single">
<label class="myzebra-style-label">
<input id="cred_form_3584_1_wpcf-ticket-month-or-course_wpcf-fields-radio-option-f63eb739e2a6499a882c8e82aa35b028-1" class="myzebra-control myzebra-radio myzebra-prime-name-wpcf-ticket-month-or-course" type="radio" value="wpcf-fields-radio-option-f63eb739e2a6499a882c8e82aa35b028-1" name="wpcf-ticket-month-or-course">
<span class="myzebra-radio-replace"></span>
</label>
<label id="cred_form_3584_1_label_wpcf-ticket-month-or-course_wpcf-fields-radio-option-f63eb739e2a6499a882c8e82aa35b028-1" for="cred_form_3584_1_wpcf-ticket-month-or-course_wpcf-fields-radio-option-f63eb739e2a6499a882c8e82aa35b028-1">per course</label>
</div>
</div>
</div>
<div style="clear: both;"></div>
I need help in putting this radio button side by side (horizontally).
I cannot do this because it will affect other radio buttons on the same page. Is there any other techniques?
.myzebra-radios-single {
float: left;
}
You can use css cover,
<div id="cred_form_3584_1_wpcf-ticket-month-or-course-radios" class="myzebra-radios">
add class 'single', like this:
<div id="cred_form_3584_1_wpcf-ticket-month-or-course-radios" class="myzebra-radios single">
and css code:
.single .myzebra-radios-single{ float:none;}
the single class can be added to any .myzebra-radios-single father in front of the class
addclass like this:
$('#cred_form_3584_1_wpcf-ticket-month-or-course-radios').addClass('single');
the id should be unique
you can target
#cred_form_3584_1_wpcf-ticket-month-or-course-radios .myzebre-radios-single
that is, the class that you want to target, but only if it is a descendant of the given id