0
我试图修复与tickmarks和收音机周期复选框。CSS：输入复选框和单选按钮外观
切换内容：“”未检查状态和内容：“\ 2714”检查状态我收到了闪烁。所以我让颜色透明。那是对的吗？
刻度线与盒子不完全吻合。如何才能改变那个刻度线？
如果句子被拆分成行，则正方形和文本落在相同的边界上。如果两者应该分开放置，我该怎么办？
单选按钮上的句点（。）非常小，足以可见。如果我增加字体大小，它会与文本不一致。
我也复制了引导CSS和HTML格式。
这是我的jsfiddle链接。 https://jsfiddle.net/488s5e70/2/
input[type="radio"],
input[type="checkbox"] {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
outline: none;
}
input[type="checkbox"]+span:before {
width: 16px;
height: 16px;
border: 1px solid #000;
content: "\2714";
color: transparent;
display: inline-block;
font-size: 13px;
margin-right: 5px;
text-align: center;
}
input[type="checkbox"]:disabled+span {
color: #ddd;
}
input[type="checkbox"]:checked+span:before {
content: "\2714";
color: #000;
}
input[type="checkbox"]:disabled:checked+span:before {
content: "\2714";
color: #ddd;
}
input[type="checkbox"]:disabled+span:before {
border: 1px solid #ddd;
}
input[type="radio"]+span:before {
width: 16px;
height: 16px;
border: 1px solid #000;
content: ".";
color: transparent;
display: inline-block;
font-size: 13px;
font-weight: bold;
margin-right: 5px;
border-radius: 8px;
text-align: center;
}
input[type="radio"]:disabled+span {
color: #ddd;
}
input[type="radio"]:checked+span:before {
content: "\00b7";
color: #000;
}
input[type="radio"]:disabled:checked+span:before {
content: "\00b7";
color: #ddd;
}
input[type="radio"]:disabled+span:before {
border: 1px solid #ddd;
}<div class="container">
<div class="checkbox">
<label>
<input type="checkbox" value="" checked>
<span>Option one is this and that—be sure to include why it's greatOption one is this and that—be sure to include why it's greatOption one is this and that—be sure to include why it's great</span>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="">
<span>Option one is this and that—be sure to include why it's great</span>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="" disabled>
<span>Option one is this and that—be sure to include why it's great</span>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="" disabled checked>
<span>Option one is this and that—be sure to include why it's great</span>
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1">
<span>Option one is this and that—be sure to include why it's great</span>
</label>
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
<span>Option one is this and that—be sure to include why it's great</span>
</label>
<label>
<input type="radio" name="optionsRadios2" id="optionsRadios1" value="option1" disabled>
<span>Option one is this and that—be sure to include why it's great</span>
</label>
<label>
<input type="radio" name="optionsRadios2" id="optionsRadios1" value="option1" checked disabled>
<span>Option one is this and that—be sure to include why it's great</span>
</label>
</div>
</div>
看看Font Awesome。它可能有你想要的图形http://fontawesome.io/icons/ –
我不想使用字体真棒。那是我的问题。我应该通过css和html完成。 –