CODEWITHSUNDEEP
javascriptjqueryhtmlcsscheckbox
Black
Black

Reputation: 89

Create multiple checkboxes using the same CSS style

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>

Upvotes: 0

Views: 4171

Answers (2)

misterManSam
misterManSam

Reputation: 24692

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;

}

Upvotes: 1

AgnosticDev
AgnosticDev

Reputation: 1853

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

Upvotes: 0

Related Questions