I've used this example for checkboxes but then later I realized I need one for the radio buttons.
Can someone please customize this example for radio buttons?
Change checkbox check image to custom image
html
<input type="radio" class="input_class_checkbox" name="role"> Coach
<input type="radio" class="input_class_checkbox" name="role"> Athlete
jquery
$('.input_class_checkbox').each(function(){
$(this).hide().after('<div class="class_checkbox" />');
});
$('.class_checkbox').on('click',function(){
$(this).toggleClass('checked').prev().prop('checked',$(this).is('.checked'))
});
Fiddle:
http://jsfiddle.net/cn6kn/
or is there a one stop solution to use custom images both for radio button and checkboxes. I searched a few but all of them are offering their own skins.
From the example I customized to included background-images as follows but it's not working for the radio buttons, all radio buttons remain checked irrespective I click the other one.
.class_checkbox {
width: 36px;
height: 36px;
background: url("../images/checkbox.png");
}
.class_checkbox.checked {
background: url("../images/checkbox-checked.png");
}
Use Pseudo-elements in this case i am using ::before (:before)
Update: since firefox doesn't support pseudo-elements on inputs yet, use the adjacent sibling selectors
:root{padding: 40px}
[name=radio]{
display: none
}
[for^=radio]{
position: relative;
margin: 64px
}
[for^=radio]:before{
content: '';
position: absolute;
left: -15px;
top: -15px;
width: 32px;
height: 32px;
background: red
}
[type=radio]:checked + [for^=radio]:before{
background: green
}
<input id=radio-1 type=radio name=radio />
<label for=radio-1></label>
<input id=radio-2 type=radio name=radio />
<label for=radio-2></label>
<input id=radio-3 type=radio name=radio />
<label for=radio-3></label>
Or the General sibling selectors
:root{padding: 40px}
[name=radio]{
display: none
}
[for^=radio]{
position: relative;
margin: 64px
}
[for^=radio]:before{
content: '';
position: absolute;
left: -15px;
top: -15px;
width: 32px;
height: 32px;
background: red
}
[id=radio-1]:checked ~ [for=radio-1]:before,
[id=radio-2]:checked ~ [for=radio-2]:before,
[id=radio-3]:checked ~ [for=radio-3]:before{
background: green
}
<input id=radio-1 type=radio name=radio />
<input id=radio-2 type=radio name=radio />
<input id=radio-3 type=radio name=radio />
<label for=radio-1></label>
<label for=radio-2></label>
<label for=radio-3></label>
The basic
[type=radio]{
position: relative;
margin: 40px
}
[type=radio]:before{
content: '';
position: absolute;
left: -15px;
top: -15px;
width: 32px;
height: 32px;
background: red
}
[type=radio]:checked:before{
background: green
}
<input type=radio />
multiple inputs
[type=radio]{
position: relative;
margin: 40px
}
[type=radio]:before{
content: '';
position: absolute;
left: -15px;
top: -15px;
width: 32px;
height: 32px;
background: red
}
[type=radio]:checked:before{
background: green
}
<input type=radio name=radio />
<input type=radio name=radio />
<input type=radio name=radio />
oh sorry, i misunderstood the first time, how about something like this? http://jsfiddle.net/swm53ran/126/
pretty much whats happening is that the old radio button css is getting hid, and then your css will take over, but still maintains the functionality of a radio button.
label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 25px;
margin-right: 15px;
font-size: 13px;
}
input[type=radio] {
display: none;
}
label:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 10px;
position: absolute;
left: 0;
bottombottom: 1px;
background-color: #aaa;
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}
.radio label:before {
border-radius: 8px;
}
input[type=radio]:checked + label:before {
content: "\2022";
color: red;
font-size: 30px;
text-align: center;
line-height: 18px;
}
Related
I have two radio buttons side by side.After the first radio button is checked I have to display the text below it. I'm using this code but the text comes vertically.I want to display it horizontally.
input[type=radio]:before {
content: '';
display: inline-block;
width: 15px;
height: 15px;
background: transparent;
border: 2px solid #004ecb;
border-radius: 50%
}
input[type=radio]:checked:after {
content: 'Are u sure you want to select all';
display: contents;
width: 15px;
height: 15px;
background: transparent;
border: 2px solid #004ecb;
border-radius: 50%;
}
<form>
<label>
<input type="radio" name="radio"/>
Radio1
</label>
<label>
<input type="radio" name="radio"/>
Radio2
</label>
</form>
position:absolute will make it exceed the limitation of it's container (the label). Also why did you limit the elem to width:15px?
input[type=radio]:before {
content: '';
display: inline-block;
width: 15px;
height: 15px;
background: transparent;
border: 2px solid #004ecb;
border-radius: 50%
}
input[type=radio]:checked:after {
content: 'Are u sure you want to select all';
background: transparent;
border: 2px solid #004ecb;
position: absolute;
}
<form>
<label>
<input type="radio" name="radio"/>
Radio1
</label>
<label>
<input type="radio" name="radio"/>
Radio2
</label>
</form>
Increase the width of ::after element
input[type=radio]:before {
content: '';
display: inline-block;
width: 15px;
height: 15px;
background: transparent;
border: 2px solid #004ecb;
border-radius: 50%
}
input[type=radio]:checked:after {
content: 'Are u sure you want to select all';
display: inline-block;
height: 15px;
width:200px;
background: transparent;
border-radius: 50%;
}
<form>
<label>
<input type="radio" name="radio"/>
Radio1
</label>
<label>
<input type="radio" name="radio"/>
Radio2
</label>
</form>
I am simply using HTML, CSS and Javascript where I am using the "toggle" method to open and close the dropdown. Also, I am using "mouseup" method to close the dropdown when someone clicks outside of it.
But the "toggle" method is not working along with the "mouseup" method. And I also need "mouseup" method to close the dropdown when user clicks outside of it. So, please tell me the solution to it, why "toggle" is not working with "mouseup" method. Thanks in Advance.
Here is the code:
var selectLabel = document.getElementById('selectLabel');
selectLabel.addEventListener('click', () => {
let dropdownDiv = selectLabel.parentElement.querySelector('.selection-dropdown');
selectLabel.classList.toggle('active');
dropdownDiv.classList.toggle('show');
});
document.addEventListener('mouseup', (e) => {
e.stopPropagation();
let dropdownDiv = document.querySelector('.selection-dropdown');
if (dropdownDiv.classList.contains('show')) {
if (!e.target.classList.contains('selection-dropdown') && !e.target.parentNode.closest('.selection-dropdown')) {
selectLabel.classList.remove('active');
document.querySelector('.selection-dropdown').classList.remove('show');
}
}
});
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
min-height: 100vh;
display: grid;
place-items: center;
margin: 0;
font-family: 'Arial', sans-serif;
}
.selection-box {
width: 500px;
position: relative;
}
.selection-box .select-upper-label {
padding: 0.75rem 1rem;
border: 1px solid #ccc;
border-radius: 3px;
color: #202020;
display: block;
width: 100%;
font-size: 1rem;
position: relative;
white-space: nowrap;
cursor: pointer;
}
.selection-box .select-upper-label::after {
content: '';
position: absolute;
width: 10px;
height: 10px;
border: 3px solid #808080;
border-top: 0;
border-right: 0;
top: 50%;
transform: translateY(-50%) rotate(-45deg);
right: 15px;
pointer-events: none;
transition: all 0.2s linear;
}
.selection-box .select-upper-label.active::after {
transform: translateY(-50%) rotate(135deg);
}
.selection-dropdown {
padding: 1.5rem 1rem;
box-shadow: 0 8px 45px rgba(0, 0, 0, 0.15);
position: absolute;
width: 100%;
top: 100%;
display: none;
border-radius: 5px;
}
.selection-dropdown.show {
display: block;
}
.selection-dropdown .select-all-link {
text-decoration: none;
color: #555;
display: block;
margin-bottom: 0.5rem;
color: royalblue;
}
.selection-dropdown .selection-dropdown-list label {
display: block;
padding: 0.5rem 1rem;
}
<div class="selection-box">
<label class="select-upper-label" id="selectLabel">Select options</label>
<div class="selection-dropdown">
<i class="ion-checkmark-round"></i> Select All
<div class="selection-dropdown-list">
<label class="label" for="option1"><input type="checkbox" id="option1"> Option 1</label>
<label class="label" for="option2"><input type="checkbox" id="option2"> Option 2</label>
<label class="label" for="option3"><input type="checkbox" id="option3"> Option 3</label>
<label class="label" for="option4"><input type="checkbox" id="option4"> Option 4</label>
<label class="label" for="option5"><input type="checkbox" id="option5"> Option 5</label>
</div>
</div>
</div>
I am making a custom checkbox so I can have both my own UI design, and still have the input[type="checkbox"] in the page for purpose of toggling css classes with it and being able to submit a form and it being taken into the form.
I am aware that if the input has display: none; it will not be passed into the form, so I will hide it since I actually don't use it visualy.
Question: what should I take into account when hidding it?
I'm thinking about giving it position: absolute; and then a negative margin so it will not show up. With the label tag I can still trigger it. But should I use opacity or visibility instead?
As you can see, using opacity:0;, users will still be able to click it. click near the actual label on the snippet below:
.chk { opacity:0; }
.chk + label {
background-color:red;
height: 22px;
width: 22px;
display:inline-block;
padding: 0 0 0 0px;
cursor:pointer;
}
.chk:checked + label { background-color:blue; }
<input type='checkbox' id='mychk' class='chk' /><label for='mychk' ></label>
Now, using a negative margin will make the label disappear too:
.chk { margin:-100px; }
.chk + label {
background-color:red;
height: 22px;
width: 22px;
display:inline-block;
padding: 0 0 0 0px;
cursor:pointer;
}
.chk:checked + label { background-color:blue; }
<input type='checkbox' id='mychk' class='chk' /><label for='mychk' ></label>
Finally: visibility:hidden does the trick:
.chk { visibility:hidden; }
.chk + label {
background-color:red;
height: 22px;
width: 22px;
display:inline-block;
padding: 0 0 0 0px;
cursor:pointer;
}
.chk:checked + label { background-color:blue; }
<input type='checkbox' id='mychk' class='chk' /><label for='mychk' ></label>
Conclusion:
use visibility:hidden to hide the <input>. This will make it invisible still with inline display in your page, without effecting the label using it.
Use this code
input[type="checkbox"] {
height: 16px;
opacity: 0;
position: absolute;
width: 16px;
}
input[type="checkbox"] + label::before {
border: 1px solid #ccc;
border-radius: 4px;
content: "";
height: 16px;
left: 8px;
position: absolute;
top: 10px;
width: 16px;
}
input[type="checkbox"]:checked + label:before {
border: 1px solid #434452;
background:#434452;
}
label {
color: #434452;
font-size: 18px;
font-weight: normal;
line-height: 100%;
padding-left: 22px;
cursor:pointer
}
<input type='checkbox' id='chk' class='chk' /><label for='chk' >check</label>
I am creating a customer preference section where the customer can select if he is interested in a fruit or not by clicking on one of two radio buttons. The problem is, I want to allow customer to leave his preference undefined on a fruit by allowing null radio button/uncheck the radio button when clicked again.
The JS is only adding classes to the radio buttons loaded via php with checked="checked" and adding a class to the parent label for CSS because on front end it appears as a button group as follows:
I tried looking it up stack overflow but no solutions worked.
$('input:not(:checked)').parent().removeClass("radio_checked");
$('input:not(:checked)').removeAttr("checked");
$('input:checked').parent().addClass("radio_checked");
$('input').click(function() {
$('input:not(:checked)').parent().removeClass("radio_checked");
$('input:not(:checked)').removeAttr("checked");
$('input:checked').parent().addClass("radio_checked");
});
#customer_preferences_form{
margin-top: 50px;
padding-right: 6.5%;
}
.container_banana, .container_apple, .container_guava, .container_strawberry, .container_pineapple, .container_mango{
margin-left: 6.5%;
margin-top: 20px;
width: 43.5%;
float: left;
border: 1px solid grey !important;
border-radius: 6px;
padding: 0 !important;
overflow: hidden;
}
.field_title{
border-bottom: 1px solid grey !important;
margin: 0 !important;
padding: 5px 15px;
display: inline-block;
width: 100%;
float: left;
}
.field_title label{
text-align: center;
font-size: 18px!important;
font-weight: normal!important;
margin: 0 0 3px;
width: 100% !important;
display:inline-block;
cursor: default !important;
}
#customer_preferences_form label{
width: 50%;
display: inline-block;
float: left;
text-align: center;
padding: 5px 0px;
cursor: pointer;
}
#customer_preferences_form label:nth-child(2){
border-right: 1px solid black;
}
#customer_preferences_form input[type="radio"]{
display:none;
}
#customer_preferences_form .radio_checked{
color: #00d8a9;
background: #FAFAFA;
font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container_mango">
<div class="field_title">
<label>Mango</label>
</div>
<label>
<input type="radio" name="mango" value="1"> Not Interested
</label>
<label>
<input type="radio" name="mango" value="2"> My Fav!
</label>
</div>
<div class="container_pineapple">
<div class="field_title">
<label>Pineapple</label>
</div>
<label>
<input type="radio" name="pineapple" value="1" checked="checked"> Not Interested
</label>
<label>
<input type="radio" name="pineapple" value="2"> My Fav!
</label>
</div>
What you have is all a bit less than optimal.
First off you should give your inputs a class to not get all your inputs in scope, but we will ignore that for now but WILL give it a proper type and anchor it to a NEW div I added with the ID not in the original.
Do NOT remove or try to add the checked attribute, it happens on change automatically and doing it will prevent resetting it. Use .prop() instead if needed.
One issue you need is that you need to find the siblings of the radio that changed and set those - they will "unset/change" - radios are single of a group BUT the change event will not fire in "unset" cases hooked this way. You COULD give them ALL a class and anchor to that but I present a solution without that extra in the markup.
Don't use the click event, use change, (what if it changes via script?)
$('#customer_preferences_form')
.on('click','label', function(event){
event.preventDefault();
event.stopImmediatePropagation();
var myradio = $(this).find('input[type=radio]');
var isChecked = myradio.is(":checked");
myradio.prop("checked",!isChecked );
myradio.trigger('setlabelstate');
});
$('#customer_preferences_form')
.on('change setlabelstate','input[type=radio]',function() {
// I used the label here to prevent the DIV sibling with title from
// having that class added - only the label siblings are needed.
var mySiblings = $(this).parent('label').siblings('label');
var radios = $(this).parent('label')
.add(mySiblings );
radios.each(function(){
var isChecked = $(this).find('input[type=radio]').is(":checked");
$(this).toggleClass("radio_checked", isChecked );
});
});
// custom event to set that initial state
$('#customer_preferences_form')
.find('input[type=radio]')
.trigger('setlabelstate');
#customer_preferences_form{
margin-top: 50px;
padding-right: 6.5%;
}
.container_banana, .container_apple, .container_guava, .container_strawberry, .container_pineapple, .container_mango{
margin-left: 6.5%;
margin-top: 20px;
width: 43.5%;
float: left;
border: 1px solid grey !important;
border-radius: 6px;
padding: 0 !important;
overflow: hidden;
}
.field_title{
border-bottom: 1px solid grey !important;
margin: 0 !important;
padding: 5px 15px;
display: inline-block;
width: 100%;
float: left;
}
.field_title label{
text-align: center;
font-size: 18px!important;
font-weight: normal!important;
margin: 0 0 3px;
width: 100% !important;
display:inline-block;
cursor: default !important;
}
#customer_preferences_form label{
width: 50%;
display: inline-block;
float: left;
text-align: center;
padding: 5px 0px;
cursor: pointer;
}
#customer_preferences_form label:nth-child(2){
border-right: 1px solid black;
}
#customer_preferences_form input[type="radio"]{
display:none;
}
#customer_preferences_form label.radio_checked{
color: #00d8a9;
background: #FAFAFA;
font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="customer_preferences_form">
<div class="container_mango">
<div class="field_title">
<label>Mango</label>
</div>
<label>
<input type="radio" name="mango" value="1"> Not Interested
</label>
<label>
<input type="radio" name="mango" value="2"> My Fav!
</label>
</div>
<div class="container_pineapple">
<div class="field_title">
<label>Pineapple</label>
</div>
<label>
<input type="radio" name="pineapple" value="1" checked="checked"> Not Interested
</label>
<label>
<input type="radio" name="pineapple" value="2"> My Fav!
</label>
</div>
</div>
Check this out it's working.
$('input:not(:checked)').parent().removeClass("radio_checked");
$('input:not(:checked)').removeAttr("checked");
$('input:checked').parent().addClass("radio_checked");
$('input:checked').parent().addClass("selected");
$('input').click(function() {
$('input:not(:checked)').parent().removeClass("radio_checked");
$('input:not(:checked)').parent().removeClass("selected");
$('input:not(:checked)').removeAttr("checked");
$('input:checked').parent().addClass("radio_checked");
$('input:checked').parent().addClass("selected");
});
$('input[type=radio]').hide();
#customer_preferences_form {
margin-top: 50px;
padding-right: 6.5%;
}
.container_banana,
.container_apple,
.container_guava,
.container_strawberry,
.container_pineapple,
.container_mango {
margin-left: 6.5%;
margin-top: 20px;
width: 43.5%;
float: left;
border: 1px solid grey !important;
border-radius: 6px;
padding: 0 !important;
overflow: hidden;
}
.field_title {
border-bottom: 1px solid grey !important;
margin: 0 !important;
padding: 5px 15px;
display: inline-block;
width: 100%;
float: left;
}
.field_title label {
text-align: center;
font-size: 18px!important;
font-weight: normal!important;
margin: 0 0 3px;
width: 100% !important;
display: inline-block;
cursor: default !important;
}
#customer_preferences_form label {
width: 50%;
display: inline-block;
float: left;
text-align: center;
padding: 5px 0px;
cursor: pointer;
}
#customer_preferences_form label:nth-child(2) {
border-right: 1px solid black;
}
#customer_preferences_form input[type="radio"] {
display: none;
}
#customer_preferences_form .radio_checked {
color: #00d8a9;
background: #FAFAFA;
font-weight: bold;
}
.selected {
background-color: #ffb3b3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container_mango">
<div class="field_title">
<label>Mango</label>
</div>
<label>
<input type="radio" name="mango" value="1"> Not Interested
</label>
<label>
<input type="radio" name="mango" value="2"> My Fav!
</label>
</div>
<div class="container_pineapple">
<div class="field_title">
<label>Pineapple</label>
</div>
<label>
<input type="radio" name="pineapple" value="1"> Not Interested
</label>
<label>
<input type="radio" name="pineapple" value="2"> My Fav!
</label>
</div>
UPDATE : If you want to uncheck radio button if clicked again. Check below snippet
$('input:not(:checked)').parent().removeClass("radio_checked");
$('input:not(:checked)').parent().removeClass("selected");
$('input:not(:checked)').removeAttr("checked");
$('input:checked').parent().addClass("radio_checked");
$('input:checked').parent().addClass("selected");
$('input:not(:checked)').parent().removeClass("radio_checked");
$('input[type=radio]').hide();
if ($('input:checked').is(':checked')) {
$('input:checked').prop('checked', true);
$('input:checked').data('waschecked', true);
}
$('input[type="radio"]').click(function() {
var $radio = $(this);
// if this was previously checked
if ($radio.data('waschecked') == true) {
$radio.prop('checked', false);
$radio.data('waschecked', false);
$radio.parent().removeClass("selected");
} else {
$radio.prop('checked', true);
$radio.data('waschecked', true);
$radio.parent().addClass("selected");
}
$radio.parent().siblings('label').children('input[type="radio"]').data('waschecked', false);
$radio.parent().siblings('label').removeClass("selected");
});
#customer_preferences_form {
margin-top: 50px;
padding-right: 6.5%;
}
.container_banana,
.container_apple,
.container_guava,
.container_strawberry,
.container_pineapple,
.container_mango {
margin-left: 6.5%;
margin-top: 20px;
width: 43.5%;
float: left;
border: 1px solid grey !important;
border-radius: 6px;
padding: 0 !important;
overflow: hidden;
}
.field_title {
border-bottom: 1px solid grey !important;
margin: 0 !important;
padding: 5px 15px;
display: inline-block;
width: 100%;
float: left;
}
.field_title label {
text-align: center;
font-size: 18px!important;
font-weight: normal!important;
margin: 0 0 3px;
width: 100% !important;
display: inline-block;
cursor: default !important;
}
#customer_preferences_form label {
width: 50%;
display: inline-block;
float: left;
text-align: center;
padding: 5px 0px;
cursor: pointer;
}
#customer_preferences_form label:nth-child(2) {
border-right: 1px solid black;
}
#customer_preferences_form input[type="radio"] {
display: none;
}
#customer_preferences_form .radio_checked {
color: #00d8a9;
background: #FAFAFA;
font-weight: bold;
}
.selected {
background-color: #ffb3b3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container_mango">
<div class="field_title">
<label>Mango</label>
</div>
<label>
<input type="radio" name="mango" value="1" > Not Interested
</label>
<label>
<input type="radio" name="mango" value="2" checked="checked"> My Fav!
</label>
</div>
<div class="container_pineapple">
<div class="field_title">
<label>Pineapple</label>
</div>
<label>
<input type="radio" name="pineapple" value="1"> Not Interested
</label>
<label>
<input type="radio" name="pineapple" value="2"> My Fav!
</label>
</div>
UPDATE 2: Fixed the bug in snippet 2 reported by Junaid Saleem
I want to use a CSS styleheet for 3 different checkboxes on the same HTML page.I'm unsure how to declare the location of the checkboxes to make them all in line with the text. Here is my CSS stylesheet for the checkbox:
input[type=checkbox]
{
visibility: hidden;
}
.checkboxOne {
background: none repeat scroll 0 0 #484848;
border-radius: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
height: 40px;
margin: -30px 200px;
position: relative;
width: 40px;
}
.checkboxOne input[type="checkbox"]:checked + label {
background: none repeat scroll 0 0 #6E0000;
}
.checkboxOne label:before {
content:'N';
padding:6px;
color:#000000;
display: block;
padding: 4px;
text-align: center;
}
.checkboxOne input[type="checkbox"]:checked + label:before {
content:'Y';
padding:6px;
color:#FFFFFF;
display:block;
padding: 4px;
text-align: center;
}
.checkboxOne label {
background: none repeat scroll 0 0 #DDDDDD;
border-radius: 100px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) inset;
cursor: pointer;
display: block;
height: 30px;
left: 5px;
position: absolute;
top: 5px;
transition: all 0.5s ease 0s;
width: 30px;
z-index: 1;
}
I know that margin is the location of the checkbox hard coded. I am hoping there is a way to make the checkboxes location inline right after the text in the html document, like this:
Did you eat breakfast? <div class="checkboxOne">
<input type="checkbox" value="1" id="checkboxInput" name="" />
<label for="checkboxInput"></label>
</div><br>
Did you eat lunch? <div class="checkboxOne">
<input type="checkbox" value="1" id="checkboxInput2" name="" />
<label for="checkboxInput2"></label>
</div><br>
Did you eat dinner? <div class="checkboxOne">
<input type="checkbox" value="1" id="checkboxInput3" name="" />
<label for="checkboxInput3"></label>
</div><br>
Let's do a proper form! Sorted out what you want now.
Correct answer Look at the fiddle - http://jsfiddle.net/Wa5s8/2/
HTML
<form>
<fieldset>
<input type="checkbox" value="1" id="checkboxInput" name="" />
<label for="checkboxInput">Did you eat breakfast?</label>
<input type="checkbox" value="1" id="checkboxInput2" name="" />
<label for="checkboxInput2">Did you eat lunch?</label>
<input type="checkbox" value="1" id="checkboxInput3" name="" />
<label for="checkboxInput3">Did you eat dinner?</label>
</fieldset>
</form>
A pinch of CSS:
input[type=checkbox] {
display:none;
}
label {
float: left;
clear: left;
width: 200px;
}
input[type=checkbox] + label:after
{
content: 'N';
background: #F00;
float: right;
}
input[type=checkbox]:checked + label:after
{
content: 'Y';
background: #FF0;
}
Possibly you could try:
HTML
<div class="row">
<input type="radio" /> <span>Radio title </span>
</div>
CSS:
.row{ display:block;}
.row span{margin:0 0 0 10px;}