如何修改CSS复选框标签以包含“必需”功能

我已创建CSS复选框。它基于我削减的CodePen脚本，但是我找不到如何修改“required”复选框。我能做的最好的就是改变“悬停”上的方块阴影的颜色，但是我尽可能的接近。如何修改CSS复选框标签以包含“必需”功能

以下是我有：

.checkbox1 { 
 
    width: 25px; 
 
    margin: 20px 100px; 
 
    position: relative; 
 
} 
 

 
.checkbox1 label { 
 
    cursor: pointer; 
 
    position: absolute; 
 
    width: 16px; 
 
    height: 16px; 
 
    top: 2px; 
 
    left: 3px; 
 
    background: linear-gradient(#ffffff, #dddddd 80%); 
 
    border: 0.5px solid #7d878d; 
 
    border-radius: 4px; 
 
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2); 
 
} 
 

 
.checkbox1 label:after { 
 
    opacity: 0.0; 
 
    content: ''; 
 
    position: absolute; 
 
    width: 14px; 
 
    height: 6px; 
 
    background: transparent; 
 
    top: 1px; 
 
    left: 2px; 
 
    border: 3px solid #ff6600; 
 
    border-top: none; 
 
    border-right: none; 
 
    transform: rotate(-50deg); 
 
} 
 

 
.checkbox1 label::after { 
 
    opacity: 0.0; 
 
} 
 

 
.checkbox1 input[type=checkbox]:checked+label:after { 
 
    opacity: 5; 
 
} 
 

 
.checkbox2 { 
 
    width: 25px; 
 
    margin: 20px 100px; 
 
    position: relative; 
 
} 
 

 
.checkbox2 label { 
 
    cursor: pointer; 
 
    position: absolute; 
 
    width: 16px; 
 
    height: 16px; 
 
    top: 2px; 
 
    left: 3px; 
 
    background: linear-gradient(#ffffff, #dddddd 80%); 
 
    border: 0.5px solid #7d878d; 
 
    border-radius: 4px; 
 
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2); 
 
} 
 

 
.checkbox2 label:after { 
 
    opacity: 0.0; 
 
    content: ''; 
 
    position: absolute; 
 
    width: 14px; 
 
    height: 6px; 
 
    background: transparent; 
 
    top: 1px; 
 
    left: 2px; 
 
    border: 3px solid #ff6600; 
 
    border-top: none; 
 
    border-right: none; 
 
    transform: rotate(-50deg); 
 
} 
 

 
.checkbox2 label::after { 
 
    opacity: 0.0; 
 
} 
 

 
.checkbox2 label:hover { 
 
    box-shadow: 0px 0px 4px 0px #ff0000; 
 
    opacity: 5; 
 
} 
 

 
.checkbox2 input[type=checkbox]:checked+label:after { 
 
    opacity: 5; 
 
}

<div class="checkbox1"> 
 
    <input type="checkbox" value="1" id="input1" name="" /> 
 
    <label for="input1"></label> 
 
</div> 
 

 
<div class="checkbox2"> 
 
    <input type="checkbox" value="2" id="input2" name="" required="" /> 
 
    <label for="input2"></label> 
 
</div>

来源

2017-06-21 Robert

所要求的，你的意思是你需要一些动作停止，除非该复选框被选中？ – gkubed

谢谢你的回应。当你取消勾选复选框时，我希望CSS复选框的行为与默认的html“required”复选框一样。那就是将箱形阴影改为红色以表明这是一个必需的动作 - 箱子必须被检查才能继续。一旦箱子重新检查，箱形阴影的红色被取消。 – Robert

使用[required]选择具有required属性的复选框，然后根据它是否被选中你的风格。

我编辑了您的原始代码，以在下面的演示中显示此工作。我向CSS添加了评论以显示我所做的更改。如您所见，第二个复选框被标记为“必需”。因此，应用[required]初始样式（红色阴影）。一旦选中，将应用[required]:checked样式。

.checkbox1 { 
 
    width: 25px; 
 
    margin: 20px 100px; 
 
    position: relative; 
 
} 
 

 
.checkbox1 label { 
 
    cursor: pointer; 
 
    position: absolute; 
 
    width: 16px; 
 
    height: 16px; 
 
    top: 2px; 
 
    left: 3px; 
 
    background: linear-gradient(#ffffff, #dddddd 80%); 
 
    border: 0.5px solid #7d878d; 
 
    border-radius: 4px; 
 
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2); 
 
} 
 

 
.checkbox1 label:after { 
 
    opacity: 0.0; 
 
    content: ''; 
 
    position: absolute; 
 
    width: 14px; 
 
    height: 6px; 
 
    background: transparent; 
 
    top: 1px; 
 
    left: 2px; 
 
    border: 3px solid #ff6600; 
 
    border-top: none; 
 
    border-right: none; 
 
    transform: rotate(-50deg); 
 
} 
 

 
.checkbox1 label::after { 
 
    opacity: 0.0; 
 
} 
 

 
.checkbox1 input[type=checkbox]:checked+label:after { 
 
    opacity: 5; 
 
} 
 

 
.checkbox2 { 
 
    width: 25px; 
 
    margin: 20px 100px; 
 
    position: relative; 
 
} 
 

 
.checkbox2 label { 
 
    cursor: pointer; 
 
    position: absolute; 
 
    width: 16px; 
 
    height: 16px; 
 
    top: 2px; 
 
    left: 3px; 
 
    background: linear-gradient(#ffffff, #dddddd 80%); 
 
    border: 0.5px solid #7d878d; 
 
    border-radius: 4px; 
 
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2); 
 
} 
 

 
.checkbox2 label:after { 
 
    opacity: 0.0; 
 
    content: ''; 
 
    position: absolute; 
 
    width: 14px; 
 
    height: 6px; 
 
    background: transparent; 
 
    top: 1px; 
 
    left: 2px; 
 
    border: 3px solid #ff6600; 
 
    border-top: none; 
 
    border-right: none; 
 
    transform: rotate(-50deg); 
 
} 
 

 
.checkbox2 label::after { 
 
    opacity: 0.0; 
 
} 
 

 
/* Here, we set the default style of an UNCHECKED REQUIRED checkbox */ 
 
.checkbox2 input[type="checkbox"][required]+label { 
 
    box-shadow: 0px 0px 4px 0px #ff0000; 
 
    opacity: 5; 
 
} 
 

 
/* Now, we set the style of a CHECK REQUIRED checkbox */ 
 
.checkbox2 input[type="checkbox"][required]:checked+label { 
 
    box-shadow: 0px 0px 0px 0px transparent !important; /* Remove the box-shadow */ 
 
} 
 

 
.checkbox2 input[type=checkbox]:checked+label:after { 
 
    opacity: 5; 
 
}

<div class="checkbox1"> 
 
    <input type="checkbox" value="1" id="input1" name="" /> 
 
    <label for="input1"></label> 
 
</div> 
 

 
<div class="checkbox2"> 
 
    <input type="checkbox" value="2" id="input2" name="" required="" /> 
 
    <label for="input2"></label> 
 
</div>

来源

2017-06-26 14:26:22

谢谢你的回应。我很欣赏你考虑和回答我的问题的时间。在哪里可以阅读这种类型的详细复选框'所需'样式 - 以更好地理解css样式。是否可以修改您的脚本，以便'required'复选框的行为类似于默认的'required'html复选框：首次加载时不显示红色方框阴影，并且仅在红色方框阴影发生更改时显示从选中到取消选中，或者用户尝试继续而不检查“必需”复选框。再次感谢您提前。 – Robert

@Robert你想要做什么是不可能的纯CSS - 你需要合并JavaScript来观察复选框未聚焦（又名：“模糊”）。 jQuery有这个功能。 –

谢谢。我将阅读关于JavaScript和jQuery的知识，并让您知道我如何继续，但可能会有一段时间... – Robert

如何修改CSS复选框标签以包含“必需”功能

回答

相关问题