Question

使用引导程序4，我希望勾选框上的勾号显示为绿色：

<div class="mycontainer">
    <div class="check-item">
      <input type="checkbox" value="Apple"   class="checkmark">
      Apple
    </div>

    <div class="check-item">
      <input type="checkbox"    value="Orange"   class="checkmark">
      Orange
    </div>
</div>

这是CSS：

.mycontainer {
  display: flex;
  flex-wrap: wrap;

}
.checkmark {
  height: 25px;
  width: 25px;
  background-color: green;  
}
.check-item {
  margin-right: 20px;
}

https://jsfiddle.net/Babrz/qbo7tce4/3/

感谢您的帮助以解决此问题。

Answer 1

CSS：

.check-item{
display:inline;
position:relative;
padding-left:35px;
margin-bottom:12px;
cursor:pointer;
font-size:22px;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none
}

.check-item input{
position:absolute;
opacity:0;
cursor:pointer
}

.checkmark{
position:absolute;
top:0;
left:0;
height:25px;
width:25px;
background-color:#eee
}

.check-item:hover input ~ .checkmark{
background-color:#ccc
}

.check-item input:checked ~ .checkmark{
background-color:#eee
}

.checkmark:after{content:"";
position:absolute;
display:none
}

.check-item input:checked ~ .checkmark:after{
display:block
}

.check-item .checkmark:after{
left:9px;
top:5px;
width:5px;
height:10px;
border:solid green;
border-width:0 3px 3px 0;
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg)
}

HTML：

<div class="mycontainer">
<label class="check-item">Apple
<input type="checkbox" value="Apple" class="checkmark">
<span class="checkmark"></span>
</label>
<label class="check-item">Orange
<input type="checkbox" value="Orange" class="checkmark">
<span class="checkmark"></span>
</label>
</div>

From here

Answer 2

提琴： http://jsfiddle.net/5g3w32ug/

HTML：

<input type="checkbox" name="genres" value="adventure" id="adventure_id">
<label for="adventure_id" style="font-family: 'SExtralight'; font-size:14px;">Adventure</label>

CSS：

   input[type="checkbox"]:checked + label::after {
   content: '';
   position: absolute;
   width: 1.2ex;
   height: 0.4ex;
   background: rgba(0, 0, 0, 0);
   top: 0.9ex;
   left: 0.4ex;
   border: 3px solid blue;
   border-top: none;
   border-right: none;
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   transform: rotate(-45deg);
}

input[type="checkbox"] {
   line-height: 2.1ex;
}

input[type="radio"],
input[type="checkbox"] {
    position: absolute;
    left: -999em;
}

input[type="checkbox"] + label {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

input[type="checkbox"] + label::before {
   content: "";
   display: inline-block;
   vertical-align: -25%;
   height: 2ex;
   width: 2ex;
   background-color: white;
   border: 1px solid rgb(166, 166, 166);
   border-radius: 4px;
   box-shadow: inset 0 2px 5px rgba(0,0,0,0.25);
   margin-right: 0.5em;
}

我是从here

那里得到的

Answer 3

您无法设置默认浏览器的复选框的样式，但是可以创建自己的自定义复选框。通过隐藏默认复选框并使用简单的HTML和CSS，您就可以完成此操作。

#my-checkbox {
  display: none;
}
.custom-checkbox {
  position: relative;
}
.custom-checkbox .checkbox {
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
  height: 25px;
  width: 25px;
  border: 1px solid #1738d7;
}
.custom-checkbox:before, .custom-checkbox:after {
  display: inline-block;
  vertical-align: middle;
  transition: all .5s;
}

.custom-checkbox:before {
  content: "";
  height: 20px;
  width: 20px;
  margin-right: 5px;
  border-radius: 2px;
  border: 1px solid #2528d7;
}
.custom-checkbox:after {
  /* the '\2713' represents the tick character */
  content: "\2713";
  position: absolute;
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
  color: green;
  font-size: 1rem;
  opacity: 0;
}
#my-checkbox:checked + .custom-checkbox:after {
  opacity: 1;
}
#my-checkbox:checked + .custom-checkbox:before {
  background-color: #ccc;
}

<input type="checkbox" id="my-checkbox" class="my-checkbox" />
<label for="my-checkbox" class="custom-checkbox">check me !</label>

无法为HTML复选框打勾添加颜色

3 个答案: