i copied a checkbox code from codepen. it works perfectly after i change it to my preference but the problem is, the check box works if its one alone ( only one checks if its above one ). is there any way to make ecah of them work independently without changing the classes and id's each time i need it. FIDDLE HERE
HTML
<div class="roundedOne">
<input type="checkbox" value="None" id="roundedOne" name="check" />
<label for="roundedOne"></label>
</div>
<div class="roundedOne">
<input type="checkbox" value="None" id="roundedOne" name="check" />
<label for="roundedOne"></label>
</div>
<div class="roundedOne">
<input type="checkbox" value="None" id="roundedOne" name="check" />
<label for="roundedOne"></label>
</div>
<div class="roundedOne">
<input type="checkbox" value="None" id="roundedOne" name="check" />
<label for="roundedOne"></label>
</div>
CSS
.roundedOne {
width: 20px;
height: 20px;
position: relative;
background: #fcfff4;
border: 2px solid #77c100;
border-radius: 3px;
}
.roundedOne label:after {
content: '';
width: 14.5px;
height: 15px;
position: absolute;
top: 2px;
left: 2px;
background: #77c100;
opacity: 0;
border-radius: 3px;
}
.roundedOne label:hover::after {
opacity: 0.3;
}
.roundedOne input[type=checkbox] {
visibility: hidden;
}
.roundedOne input[type=checkbox]:checked + label:after {
opacity: 1;
}
All your checkboxes have the same ID. And your label's for="" are all pointing to the same id. Make them different and that should fix your issue. Your IDs have to be different. You can only have the one instance of a particular ID on a given page
You're issue is with having multiple uses of ID.
The:
<label for="roundedOne"></label>
is looking for an input with the id="roundedOne".
Since all of your inputs share that ID it will go to the first one.
Try adding a unique ID to each input, and changing the labels to match, and that should solve your issue.
Here's a fiddle of the above changes.
Related
Edit: The original answer did not work for mobile devices. Go here for a solution that does.
I already know how to make an <input type="radio">'s <label> look like the button of any specific browser's default <button> by playing with the CSS until it looks identical to the <button> I'm trying to replicate. But this will look out of place whenever someone views it from a browser that has a different default <button>. (Even if I could replicate every default <button> for every browser, a new one will probably be invented tomorrow.)
Therefore, I want to use an actual button to get the default styling appropriate to the browser.
A recreation of the code so far:
<h1>Choose A or B</h1>
<label><button type="button"><input type="radio" name="choice" value="A">A</button></label>
<label><button type="button"><input type="radio" name="choice" value="B">B</button></label>
Later I'll change <input type="radio" name="choice" value="A"> to <input type="radio" name="choice" value="A" hidden> and use some other styling to show if it's checked or not, but for now I'm leaving it in for diagnostic reasons.
If you run the snippet, you'll notice that clicking the <input type="radio"> works as intended, but clicking the <button>itself does nothing.
Here is another failed attempt:
<h1>Choose A or B</h1>
<input type="radio" name="choice" value="A" id="a"><label for="a"><button type="button">A</button></label>
<input type="radio" name="choice" value="B" id="b"><label for="b"><button type="button">B</button></label>
I even tried adding the disabled attribute. Nothing is working as intended. Should I give up and style the <label> manually, or is there a way to access <button>'s default appearance anyway?
(Yes, I already know I could use javascript to simulate <input type="radio">'s behaviour on a <button> but I'm going to have lots of buttons in lots of groups throughout the website. So I'll just style <label> manually if it means the website will be easier to maintain. Likewise for installing an entire library just for this one problem.)
An idea is to add pointer-events:none; to the button but you won't have the styles of the :focus,:active and :hover state.
button {
pointer-events:none;
}
<h1>Choose A or B</h1>
<input type="radio" name="choice" value="A" id="a"><label for="a"><button type="button">A</button></label>
<input type="radio" name="choice" value="B" id="b"><label for="b"><button type="button">B</button></label>
You can, however, add your own custom :focus :active :hover and :checked state with:
input[type="radio"]:focus + label button{
/*add checked style here*/
label:hover > button {
/*add hover style here*/
}
label:active > button {
/*add active style here*/
}
input[type="radio"]:checked + label button{
/*add checked style here*/
It will not work, as you are doing. You need to do it like this.
[type="radio"]:checked,
[type="radio"]:not(:checked) {
position: absolute;
left: -9999px;
}
[type="radio"]:checked + label,
[type="radio"]:not(:checked) + label
{
position: relative;
padding-left: 28px;
cursor: pointer;
line-height: 20px;
display: inline-block;
color: #666;
}
[type="radio"]:checked + label:before,
[type="radio"]:not(:checked) + label:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 30px;
border: 1px solid #ddd;
border-radius: 5px;
background: #fff;
z-index: -1;
}
[type="radio"]:checked + label:after,
[type="radio"]:not(:checked) + label:after {
content: '';
width: 94px;
height: 24px;
background: #F87DA9;
position: absolute;
top: 4px;
left: 4px;
border-radius: 5px;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
z-index: -1;
}
[type="radio"]:not(:checked) + label:after {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
[type="radio"]:checked + label:after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
<form action="#">
<p>
<input type="radio" id="test1" name="radio-group" checked>
<label for="test1">Apple</label>
</p>
<p>
<input type="radio" id="test2" name="radio-group">
<label for="test2">Peach</label>
</p>
<p>
<input type="radio" id="test3" name="radio-group">
<label for="test3">Orange</label>
</p>
</form>
You can do it using CSS :before and :after pseudo-classes without using any button. You can modify the above example as per your requirements.
Code is copied from https://codepen.io/manabox/pen/raQmpL and is used after modifications in the above example.
My question may be stupid but please I need an explanation. I found both html and CSS code to implement ON and OFF switcher but I really don't understand how the label animate is possible without javaScript using a click event.
can someone explain to me the trick in this code.
I have never seen this before
HTML:
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
CSS:
<style>
.onoffswitch {
position: relative; width: 109px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
height: 30px; padding: 0; line-height: 16px;
border: 2px solid #999999; border-radius: 3px;
background-color: #EEEEEE;
transition: background-color 0.3s ease-in;
}
.onoffswitch-label:before {
content: "OFF";
display: block; width: 16px; margin: 0px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 91px;
border: 2px solid #999999; border-radius: 5px;
padding:5px;
width:30px;
text-align:center;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label {
background-color: #00CED1;
}
.onoffswitch-checkbox:checked + .onoffswitch-label, .onoffswitch-checkbox:checked + .onoffswitch-label:before {
border-color: #00CED1;
}
.onoffswitch-checkbox:checked + .onoffswitch-label:before {
right: 0px;
content: "ON";
padding:5px;
width:30px;
text-align:center;
}
</style>
Thank you.
When a label element is clicked, it activates its labelled element. In this case the labelled element is a checkbox.
This causes the checkbox to toggle its checked property (not attribute*).
The :checked pseudo-selector will match input[type="checkbox"] or input[type="radio"] elements that have their checked property in the true state.
The change in the :checked status allows the new CSS properties to be applied to the label because the entire selector chain subsequently matches (or no longer matches, depending on whether the checkbox is now checked or unchecked).
The CSS transition rule then animates the changed properties from one state to the other.
Here's a simple demo of a form that can be used to test the functionality of labels on various different field types. Note that the submit button won't work due to the form being in a sandboxed <iframe>.
<form action="http://example.com" target="_blank" method="get">
<p>
<label for="text">text</label>
<input type="text" name="text" id="text">
</p>
<p>
<label for="select">select</label>
<select name="select" id="select">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</p>
<p>
<label for="textarea">textarea</label>
<textarea name="textarea" id="textarea" cols="30" rows="10"></textarea>
</p>
<p>
<label for="checkbox">checkbox</label>
<input type="checkbox" name="checkbox" id="checkbox" value="checked">
</p>
<fieldset>
<legend>radio buttons</legend>
<p>
<label for="radio-1">radio 1</label>
<input type="radio" name="radio" id="radio-1" value="1">
</p>
<p>
<label for="radio-2">radio 2</label>
<input type="radio" name="radio" id="radio-2" value="2">
</p>
</fieldset>
<p>
<label for="reset">reset</label>
<input type="reset" id="reset" value="Reset">
</p>
<p>
<label for="button">button</label>
<button id="button" type="submit">Submit</button>
</p>
</form>
* so why is it important that the property is changed but not the attribute? When you use a reset button (input[type="reset"], or button[type="reset"]), the form will be reset to whatever the values of the HTML attributes (or innerHTML for <textarea>) are for each field. You can test this by using JavaScript to modify the value attribute of a text field and then resetting the form to see that no change happens.
I've seen some tricks to change the background color (or other css attributes) on a group of radio buttons. Here is some html
<div class="myclass col-xs-3">
<input type="radio" name="mygroup" value="one" data-bind="checked: SelectedAttributeValueId" />
</div>
<div class="myclass col-xs-3">
<input type="radio" name="mygroup" value="two" data-bind="checked: SelectedAttributeValueId" />
</div>
<div class="myclass col-xs-3">
<input type="radio" name="mygroup" value="three" data-bind="checked: SelectedAttributeValueId" />
</div>
I've tried things like:
.myclass input[type="radio"]:checked{
background-color:#f2f2f2;
}
and
.myclass :checked{
background-color:#f2f2f2;
}
here is a fiddle link. I am using knockout, so maybe this is the tool I should use to style the <div> elements?
All input is appreciated, I would prefer not to use jquery or javscript here (although knockout is okay)
It is not possible to style the radio buttons circle.
However, you can use pseudo-elements (in this case :before) to render a box around the radio button, then style it in CSS.
input[type="radio"] {
display: inline-block;
position: relative;
width: 25%;
margin: 0;
}
input[type="radio"]:before {
content: '';
position: absolute;
z-index: -1;
top: -.5em;
right: 0;
bottom: -.5em;
left: 0;
border: 1px solid black;
background-color: #0073ae;
}
input[type="radio"]:checked:before {
background-color: #f2f2f2;
}
<input type="radio" name="mygroup" value="one" /><input
type="radio" name="mygroup" value="two" /><input
type="radio" name="mygroup" value="three"/>
Here's a solution via jquery.
$('[type=radio]').click(function(){
if($(this).val() == "one") {
$('.myclass').css("background-color", "yellow");
}
//...two...three
});
I am adding background image on radio button. But my issue is image is not on checked or click on radio button(background image).
Here is my code
.form-group input[type="radio"] {
display: none;
}
.gender input[type="radio"] + label::after {
background:url('img/male.png') no-repeat -7px -81px;
width: 28px;
height: 56px; }
.gender input[type="radio"]:checked + label::before {
background:url('img/m-f-icon.png') no-repeat;
width: 28px;
height: 56px;
display: inline-block;
position: relative;
content: ' ';
margin-right: 10px;
cursor: pointer;
background-position-x: -45px;
}
<div class="form-group gender">
<label class="control-label col-xs-2">I'm a</label>
<div class="col-xs-1">
<input type="radio" class="male" name="genderRadios" value="male">
<label class="radio-inline gender"></label>
</div>
<div class="col-xs-1">
<input type="radio" class="female" name="genderRadios" value="female">
<label class="radio-inline gender"></label>
</div>
</div>
Kindly advise me any solution.
Please find demo below I have put together, this is the correct structure you should be using with the appropriate for specified on each of your labels that match the related radio button. You can switch out the background colours for background images of your choice.
JSFiddle:
https://jsfiddle.net/kdrh56md/
I've been trying to make custom radio buttons work. I had been using check boxes but found that I needed to restrict the checked options to one. I've been looking at examples/tutorials that I found using Google and thought I understood enough for a simple set of 4 radio buttons but ...
They display correctly initially with the first button checked but checking on other buttons just displays the checked PNG: a previously checked button does not revert to unchecked state.
The buttons are arranged sequentially horizontally in their own div.
HTML
<div class='radio'>
<input id='B12' type='radio' class='radiobutton' checked>
<label id='lblB12' class='radiobutton-label' for='B12'>IR </label>
<input id='BBW' type='radio' class='radiobutton' >
<label id='lblBBW' class='radiobutton-label' for='BBW'>Wide</label>
<input id='B10' type='radio' class='radiobutton' >
<label id='lblB10' class='radiobutton-label' for='B10'>B10</label>
<input id='B8' type='radio' class='radiobutton' >
<label id='lblB8' class='radiobutton-label' for='B8'>B8 </label>
</div>
CSS3
.radiobutton-label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 25px;
margin-right: 15px;
font-size: 15px;
}
input[type="radio"] {
display: none;
margin: 10px;
}
.radiobutton-label:before {
content:"";
display: inline-block;
width: 24px;
height: 24px;
margin-right: 10px;
position: absolute;
left: 0;
bottombottom: 1px;
background: url(resources/CheckBoxUnchecked.png) left top;
}
input[type=radio]: + label:before {
background: url(resources/CheckBoxUnchecked.png) left top;
}
input[type=radio]:checked + label:before {
background: url(resources/CheckBoxOK.png) left top;
}
This is the first web page that I have attempted.
Relevant Spec - 17 Forms / 17.2.1 Control types
Radio buttons are like checkboxes except that when several share the same control name, they are mutually exclusive: when one is switched "on", all others with the same name are switched "off".
Therefore if you want the radio elements to be mutually exclusive, just give them all the same name attribute. In this instance, I just used name="checkboxes".
Updated HTML EXAMPLE HERE
<div class='radio'>
<input id='B12' type='radio' class='radiobutton' name="checkboxes" checked="checked"/>
<label id='lblB12' class='radiobutton-label' for='B12'>IR </label>
<input id='BBW' type='radio' class='radiobutton' name="checkboxes"/>
<label id='lblBBW' class='radiobutton-label' for='BBW'>Wide</label>
<input id='B10' type='radio' class='radiobutton' name="checkboxes"/>
<label id='lblB10' class='radiobutton-label' for='B10'>B10</label>
<input id='B8' type='radio' class='radiobutton' name="checkboxes"/>
<label id='lblB8' class='radiobutton-label' for='B8'>B8 </label>
</div>
Base CSS:
input[type=radio] + label:before {
background: url('http://www.csscheckbox.com/checkboxes/vlad.png') 2px 4px no-repeat;
}
input[type=radio]:checked + label:before {
background: url('http://www.csscheckbox.com/checkboxes/vlad.png') 2px -18px no-repeat;
}