复选框背景颜色和样式

Question

我已经读过，由于不同的浏览器设置，没有任何好方法来设置复选框样式。我知道你应该能够通过将每个复选框包装成Div来改变背景颜色，但边框和arraow怎么样？

但也许有人有任何提示来像这样设计：

目前我在Firefox中默认：

Answer 1

使用蒙面叠加

label {
  display: block;
  border: 4px solid #88a;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, .3) inset;
  border-radius: 10%;
  width: 1em;
  height: 1em;
}
input {
  display: none;
}
input:checked + label {
  background-color: rgba(0, 255, 0, .8);
  box-shadow: 0px 0px 2px rgba(0, 0, 0, .1) inset;
}

<input type="checkbox" id="chk">
<label for="chk"></label>

Answer 2

我认为最好的方法是在一个span，div（无论如何）中包含radio / checkbox然后有一个标签，其中for属性链接到输入的id。

然后使用visibility隐藏输入：隐藏并为您想要的标签设置样式。 （注意，一个输入可以有多个标签）。

您可以使用之前或之后添加复选标记。

.styled-radio {
  visibility:hidden;
  position:absolute;
  z-index:-2;
 }

.styled-radio-label {
  border:1px solid #ccc;
  height:15px;
  width:15px;
  position:relative;
}


.styled-radio:checked + .styled-radio-label:after {
  content:'\2713';
  position:absolute;
  left:50%;
  top:50%;
  transform:translateY(-50%) translateX(-50%);
}

label {
  display:inline-block;
  vertical-align:middle;
}

<span>
  <input type='radio' id='html' value='html' class='styled-radio' name='lang'/>
  <label for='html' class='styled-radio-label'></label>
  <label for='html'>HTML</label>
</span>

<span>
  <input type='radio' id='css' value='css' class='styled-radio' name='lang'/>
  <label for='css' class='styled-radio-label'></label>
  <label for='css'>CSS</label>
</span>

<span>
  <input type='radio' id='JS' value='JS' class='styled-radio' name='lang'/>
  <label for='JS' class='styled-radio-label'></label>
  <label for='JS'>JS</label>
</span>

Answer 3

Deddy，您可以使用css代码<input>在input + div之后设置元素样式。如果选中复选框，请尝试样式input:checked + div。如果隐藏输入元素，并用<label>包围所有元素，则可以轻松地在其中设置div元素和其他元素。其余的取决于你的想象力;）

<label>
    <input type="checkbox">
    <div></div>
</label>

Answer 4

我的任务是与引导程序一起很好地工作。我将FontAwesome用于内容。

input[type=checkbox] {
    -moz-appearance:none;
    -webkit-appearance:none;
    -o-appearance:none;
    outline: none !important;
    content: none;  
}

input[type=checkbox]:before {
    font-family: "FontAwesome";
    content: "\f00c";
    font-size: 13px;
    border-radius:4px;
    color: transparent !important;
    background: #fff;
    display: block;
    width: 17px;
    height: 17px;
    border: 2px solid #d3d6db;
    margin-right: 7px;
   
}

input[type=checkbox]:checked:before {
  background: #3ea8df;
    color: rgba(255,255,255, 0.85) !important;
  border: 2px solid #3ea8df;
  border-radius:4px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<span class="col-xs-6" >
  <input type="checkbox" name="chk"><span class="meme">Manga</span>
  </span>
<span>
<span class="col-xs-6" >
  <input type="checkbox" name="chk"><span class="meme">Comics</span>
  </span>
<span>

.meme {
  margin-top:4px;
}

Answer 5

如果您使用Fontawesome（http://fontawesome.io/icons/），您将能够像任何其他字体一样设置此元素的样式。 或http://www.inserthtml.com/2012/06/custom-form-radio-checkbox/