我想要的是,当radio button
未选择一个时,它的边框将颜色变为红色,以便清楚地识别它,我最初已经能够修改半径,但在应用操作时不能。
input[type="radio"] {
display: none;
}
input[type="radio"] + span {
background-color: #fefefe;
border: 1px solid;
border-color: blue;
border-radius: 50px;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
display: inline-block;
float: left;
margin-right: 7px;
padding: 7px;
position: relative;
-webkit-appearance: none;
cursor:pointer;
}
input[type="radio"]:checked + span {
color: #f00;
}
input[type="radio"]:checked + span:after {
background: blue;
border-radius: 50px;
box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.75), inset -1px -1px 1px rgba(0, 0, 0, 0.75);
content: " ";
height: 10px;
left: 2px;
position: absolute;
top: 2px;
width: 10px;
}
label:hover input[type="radio"] + span {
border-color: green;
}
.error_borde {
border-color: red;
}
<div class="left width50">
<label>Tipo Sistema:</label><font size="4"> * </font><br />
<label><input type="radio" name="tipoSistemaP" class="radios" id="rbtRadioR" value="1" /><span></span>Remesa</label>
<label style="float:right;margin-right:80px;"> <input type="radio" name="tipoSistemaP" class="radios" id="rbtRadioPe" value="2" /><span></span>Pedimento Pagado</label>
</div>
边框更改代码:
$("#rbtRadioR").addClass('error_borde');
注意:该动作必须在点击保存按钮时执行
你不需要为此使用js。只需将边框颜色默认设置为红色,并在满足伪属性时将颜色覆盖为蓝色
:checked
。使用您自己的代码(同样需要注意的是,此示例仅适用于 webkit)
您可以从包含输入的容器和引用它的标签创建自定义收音机。然后,使用
after
您可以模拟指示选择的点。要从按钮中选择收音机,只需执行以下两项操作之一:
click
checked
为true
。例子
错误:
通过应用 class
error_borde
,规则只是设置样式input
而不修改span
,它是带有蓝色边框的元素。解决方案:
创建一个影响classy的
span
相邻兄弟的规则。input radio
error_borde
例子: