CSS：输入复选框和单选按钮外观

Question

我正在尝试修复带有标记和带有句点的广播的复选框。

1. 切换内容：＆＃34;＆＃34;未经检查的状态和内容：＆＃34; \ 2714＆＃34;检查状态我得到一个闪烁。所以我让颜色透明。这是对的吗？

2. 刻度线与盒子完全吻合。怎么能只改变那个tickmark？

3. 如果句子被分成行，则正方形和文本位于同一边距。如果两者都应该是单独的块，我该怎么办？

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

我也复制了bootstrap CSS和HTML格式。

这是我的jsfiddle链接。 https://jsfiddle.net/488s5e70/2/

＆＃13;
＆＃13;
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;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 1

1. 透明度代替内容“”

正确的方法！它甚至更好。一切都好吗

1. 符合刻度线

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

如果您有移动端用户，请注意您的元素内的所有内容（刻度和球）可能都会发生变化 plain text replaced with android emoticons

1. 单独阻止

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

1. 单选

使用另一个角色，我的产品是“●”或“•” 但最好的方法是background-image

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

Answer 2

是的，我会改变一些事情来解决这个问题。

1. Flexbox，Flexbox无处不在。
2. 为什么要使用句号，我们可以使用BLACK CIRCLE

如果输入＆＃34;（十六进制值）＆＃34;您可以找到不同的形状here。因为你之前的内容会出现。

这就是我所做的。

＆＃13;
＆＃13;
input[type="radio"],
input[type="checkbox"] {
  position: relative;
  -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;
  /* new code notice me! */
  display: inline-flex;
  align-items: center;
  justify-content: 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;
  /* new code notice me! */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
input[type="radio"]:disabled+span {
  color: #ddd;
}
/* \25cf is the code for BLACK CIRCLE */
input[type="radio"]:checked+span:before {
  content: "\25cf";
  color: #000;
}
input[type="radio"]:disabled:checked+span:before {
  content: "\25cf";
  color: #ddd;
}
input[type="radio"]:disabled+span:before {
  border: 1px solid #ddd;
}
＆＃13;
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<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>
＆＃13;
＆＃13;
＆＃13;

flexbox行是;

• display：inline-flex;
• align-items：center;
• justify-content：center;

他们的意思是;   - 我内心的东西应该使用flexbox，   - 它们应该垂直居中，   - 它们应该水平居中。

我希望你觉得这很有帮助： - ）