html - CSS:输入复选框和单选按钮外观

Question

我正在尝试修复带有刻度线的复选框和带有句点的 radio 。

1. 在未检查状态和内容:“\2714”检查状态下切换内容:“”我遇到了闪烁。所以我使颜色透明。对吗？

2. 刻度线与框不完全吻合。如何只改变那个刻度线？

3. 如果句子被分成几行，正方形和文本落在相同的边距上。如果两者都应该在单独的 block 中，我该怎么办？

4. 单选按钮上的句点 (.) 非常小，可以看到。如果我增加字体大小，它就会与文本不对齐。

我也复制了 bootstrap 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&mdash;be sure to include why it's greatOption one is this and that&mdash;be sure to include why it's greatOption one is this and that&mdash;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&mdash;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&mdash;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&mdash;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&mdash;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&mdash;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&mdash;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&mdash;be sure to include why it's great</span>
    </label>
  </div>
</div>

Answer 1

1. 透明而不是内容“”

这是正确的做法!它甚至更好。一切正常

---

1. 适合刻度线

当它是关于字体时，不保证在所有浏览器中显示相同和真实，我只是更喜欢复选框的背景图像，png 图像

如果您有移动端用户，请注意您的元素(tick 和 ball)中的所有内容都可能发生变化 plain text replaced with android emoticons

---

1. 单独的 block

只有 2 列的表格可能是最快的解决方案。

---

1. radio

换个字吧，我给的是“●”或“•” 然而最好的方法是 background-image

input[type="radio"]:checked+span:before{
  content:"\25CF"; /* or any better character */
  color:#000;
}