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完成。 –