Explore our sites

Stack Exchange
tour help careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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>
share|improve this question
 
use inline element like span instead of div, or set div inline –  charlietfl Dec 6 at 3:34
add comment

2 Answers

up vote 0 down vote

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;}
share|improve this answer
add comment
up vote 0 down vote

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;

}
share|improve this answer
 
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. –  Black Dec 6 at 3:53
 
Here you are. Look at the fiddle now, I changed the answer. –  misterManSam Dec 6 at 4:01
 
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. –  Black Dec 6 at 4:14
 
Scratch that! Here: jsfiddle.net/Wa5s8/2 You can fiddle with the css :after inputs to get the form you want. –  misterManSam Dec 6 at 5:19
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.