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

我试着用记号来修正复选框，用句号来修正收音机

切换未选中状态下的内容：“”和内容：“\2714”已选中状态我得到一个闪烁。所以我使颜色透明。对吗

勾号与方框不完全相符。怎么能只改变那个记号

如果句子分成几行，正方形和文本将落在同一页边距上。如果两者都在不同的块中，我该怎么办

单选按钮上的周期（.）很小，可以看到。如果我增加字体大小，它将与文本不对齐

我也复制了引导CSS和HTML格式

这是我的JSFIDLE链接。

input[type=“radio”]，
输入[type=“checkbox”]{
-moz外观：无；
-webkit外观：无；
外观：无；
大纲：无；
}
输入[type=“checkbox”]+span:before{
宽度：16px；
高度：16px；
边框：1px实心#000；
内容：“\2714”；
颜色：透明；
显示：内联块；
字体大小：13px；
右边距：5px；
文本对齐：居中；
}
输入[type=“checkbox”]：禁用+span{
颜色：#ddd；
}
输入[type=“checkbox”]：选中+span:之前{
内容：“\2714”；
颜色：#000；
}
输入[type=“checkbox”]：禁用：选中+span:before{
内容：“\2714”；
颜色：#ddd；
}
输入[type=“checkbox”]：禁用+span:before{
边框：1px实心#ddd；
}
输入[type=“radio”]+span:before{
宽度：16px；
高度：16px；
边框：1px实心#000；
内容：“.”；
颜色：透明；
显示：内联块；
字体大小：13px；
字体大小：粗体；
右边距：5px；
边界半径：8px；
文本对齐：居中；
}
输入[type=“radio”]：禁用+span{
颜色：#ddd；
}
输入[type=“radio”]：选中+span:之前{
内容：“\00b7”；
颜色：#000；
}
输入[type=“radio”]：禁用：选中+span:之前{
内容：“\00b7”；
颜色：#ddd；
}
输入[type=“radio”]：禁用+span:之前{
边框：1px实心#ddd；
}

选项一是这个和那个&mdash；一定要包括为什么它是greatOption one是这个和那个&mdash；一定要包括为什么它是greatOption one是这个和那个&mdash；一定要包括为什么它是伟大的
选项一是这个和那个&mdash；一定要包括为什么它是伟大的
选项一是这个和那个&mdash；一定要包括为什么它是伟大的
选项一是这个和那个&mdash；一定要包括为什么它是伟大的
选项一是这个和那个&mdash；一定要包括为什么它是伟大的
选项一是这个和那个&mdash；一定要包括为什么它是伟大的
选项一是这个和那个&mdash；一定要包括为什么它是伟大的
选项一是这个和那个&mdash；一定要包括为什么它是伟大的

透明而不是内容“

这是正确的方式！甚至更好。一切都好

---

拟合刻度线

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

如果您有移动端用户，请注意元素中的所有内容（勾号和球）可能都已更改

---

分离块

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

---

收音机

使用另一个字符，我的产品是“●" 或“•” 但是最好的方法是背景图像

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

透明而不是内容“

这是正确的方式！甚至更好。一切都好

---

拟合刻度线

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

如果您有移动端用户，请注意元素中的所有内容（勾号和球）可能都已更改

---

分离块

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

---

收音机

使用另一个字符，我的产品是“●“或”•“ 但是最好的方法是背景图像

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

---

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

Flexbox，Flexbox无处不在

为什么要使用句点，而我们可以使用

黑圈

如果在内容出现之前键入“（十六进制值）”作为内容，则可以找到不同的形状

这就是我所做的

input[type=“radio”]，
输入[type=“checkbox”]{
位置：相对位置；
-moz外观：无；
-webkit外观：无；
外观：无；
大纲：无；
}
输入[type=“checkbox”]+span:before{
宽度：16px；
高度：16px；
边框：1px实心#000；
内容：“\2714”；
颜色：透明；
显示：内联块；
字体大小：13px；
右边距：5px；
文本对齐：居中；
/*新代码注意我*/
显示：内联flex；
对齐项目：居中；
证明内容：中心；
}
输入[type=“checkbox”]：禁用+span{
颜色：#ddd；
}
输入[type=“checkbox”]：选中+span:之前{
内容：“\2714”；
颜色：#000；
}
输入[type=“checkbox”]：禁用：选中+span:before{
内容：“\2714”；
颜色：#ddd；
}
输入[type=“checkbox”]：禁用+span:before{
边框：1px实心#ddd；
}
输入[type=“radio”]+span:before{
宽度：16px；
高度：16px；
边框：1px实心#000；
内容：“.”；
颜色：透明；
显示：内联块；
字体大小：13px；
字体大小：粗体；
右边距：5px；
边界半径：8px；
文本对齐：居中；
/*新代码注意我*/
显示：内联flex；
对齐项目：居中；
证明内容：中心；
}
输入[type=“radio”]：禁用+span{
颜色：#ddd；
}
/*\25cf是黑圈的代码*/
输入[type=“radio”]：选中+span:之前{
内容：“\25cf”；
颜色：#000；
}
输入[type=“ra