Question

我想在同一个HTML页面上为3个不同的复选框使用CSS样式表。我不确定如何声明复选框的位置以使它们与文本一致。这是我的复选框CSS样式表：

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

我知道边距是硬编码复选框的位置。我希望有一种方法可以使复选框位置紧跟在html文档中的文本之后，如下所示：

   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>

Answer 1

让我们做一个正确的表格！排除你现在想要的东西。

正确答案查看小提琴 - 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>

一小撮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;

}

Answer 2

可能你可以试试： HTML

         <div class="row">
           <input type="radio" /> <span>Radio title </span>
         </div>

CSS：

         .row{ display:block;}
         .row span{margin:0 0 0 10px;}

使用相同的CSS样式创建多个复选框

2 个答案: