如何更改HTML中复选框的复选标记颜色?
我想将下面复选框中的复选标记(勾选)颜色(其名称为“流派”)更改为“蓝色”。但它显示为“黑色”如何更改HTML中复选框的复选标记颜色?,html,Html,我想将下面复选框中的复选标记(勾选)颜色(其名称为“流派”)更改为“蓝色”。但它显示为“黑色” 冒险 我认为您不能。但是您可以通过在复选框的背景中使用勾选图像来实现。 解释得很好我想这就是你想要的(仅CSS): 你可以检查答案,我得到的来源 CSS: 到目前为止你都尝试了什么?为什么不使用图像精灵呢?这太糟糕了。不是责备你,而是那些拼凑CSS的书呆子们。你在代码中的什么地方为记号指定了蓝色?@Rahul这里是border:3px纯蓝色 <input type="checkbox" na
冒险
我认为您不能。但是您可以通过在复选框的背景中使用勾选图像来实现。
解释得很好我想这就是你想要的(仅CSS): 你可以检查答案,我得到的来源 CSS:
到目前为止你都尝试了什么?为什么不使用图像精灵呢?这太糟糕了。不是责备你,而是那些拼凑CSS的书呆子们。你在代码中的什么地方为记号指定了蓝色?@Rahul这里是
border:3px纯蓝色代码>
<input type="checkbox" name="genres" value="adventure" id="adventure_id">
<label for="adventure_id" style="font-family: 'SExtralight'; font-size:14px;">Adventure</label>
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;
}