Create multiple checkboxes using the same CSS style

Question

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>

use inline element like span instead of div, or set div inline — charlietfl
– charlietfl, Commented Dec 6, 2013 at 3:34

misterManSam · Accepted Answer · 2013-12-06 05:26:16Z

1

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;

}

edited Dec 6, 2013 at 5:26

answered Dec 6, 2013 at 3:45

misterManSam

24.8k11 gold badges72 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Black Over a year ago

Not quite what I meant. I want the questions each to be on separate lines with their corresponding checkbox right next to them. I am using the CSS to style the checkbox because this is for a mobile application.

misterManSam Over a year ago

Here you are. Look at the fiddle now, I changed the answer.

Black Over a year ago

That's the setup I want exactly, but is there a way to implement that with my CSS? My way to fix this is to make 2 new checkboxes in the CSS and change their locations by hard coding, but that will have a lot of repeated code and I want to do a more efficient way.

misterManSam Over a year ago

Scratch that! Here: jsfiddle.net/Wa5s8/2 You can fiddle with the css :after inputs to get the form you want.

AgnosticDev · Accepted Answer · 2013-12-06 03:36:17Z

0

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;}

answered Dec 6, 2013 at 3:36

AgnosticDev

1,8632 gold badges20 silver badges37 bronze badges

Collectives™ on Stack Overflow

Create multiple checkboxes using the same CSS style

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related