当我在表单中选择一个复选框时,我试图添加删除线(Bootstrap v3)。我编码了bootply:
<div class="form-group ">
<label for="inputName" class="col-md-1 control-label">select</label>
<div class="col-md-5">
<div class="checkbox">
<label><input type="checkbox" name="packersOff" class="strikethrough" value="1">sssssssss</label>
</div>
</div>
</div>
并在css中添加了一个类
.strikethrough:checked{
text-decoration:line-through;
}
但它不起作用..
答案 0 :(得分:9)
这是一个在检查输入时进行检查的解决方案:
HTML:
<div class="form-group ">
<label for="inputName" class="col-md-1 control-label">select</label>
<div class="col-md-5">
<div class="checkbox">
<input type="checkbox" name="packersOff" value="1"/>
<label class="strikethrough">sssssssss</label>
</div>
</div>
</div>
CSS
input[type=checkbox]:checked + label.strikethrough{
text-decoration: line-through;
}
使用此解决方案时,如果选中复选框,它将对标签执行某些操作。如果你愿意的话,你可以把它变成粗体或改变它的颜色。
答案 1 :(得分:5)
问题是您正在尝试在复选框上应用<xs:element name="generator">
<xs:complexType>
<xs:sequence>
<xs:element name="GenMode" maxOccurs="unbounded" type="GenModeType" />
</xs:sequence>
<xs:attribute name="Mode" use="required" type="xs:string"/>
</xs:complexType>
<xs:key name="GenModeName">
<xs:selector xpath="GenMode"/>
<xs:field xpath="@name"/>
</xs:key>
</xs:element>
<xs:complexType name="GenModeType">
<xs:attribute name="name" use="required" type="xs:string"/>
<xs:attribute name="kV" use="required" type="xs:integer"/>
<xs:attribute name="mA" use="required" type="xs:decimal"/>
</xs:complexType>
,因为文本位于标签内。您可以将文本包装在line-through
中,并在<span>
:checked
答案 2 :(得分:1)
.strikethrough:checked + .strikeThis {
text-decoration: line-through
}
&#13;
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group ">
<label for="inputName" class="col-md-1 control-label">select</label>
<div class="col-md-5">
<input name="packersOff" class="strikethrough" value="1" type="checkbox">
<label for="packersOff" class="strikeThis">sssssssss</label>
</div>
</div>
&#13;
答案 3 :(得分:1)
:checked
CSS伪类选择器代表任何广播(<input type="radio">
),复选框(<input type="checkbox">
)或选项(<option>
在<select>
)元素中检查或切换为打开状态。该 用户可以通过单击元素或选择一个来更改此状态 不同的值,在这种情况下:不再检查伪类 适用于此元素,但适用于相关元素。
来源:https://developer.mozilla.org/en-US/docs/Web/CSS/%3Achecked
为了使其有效,请将HTML重新排列为:
<div class="form-group ">
<label for="inputName" class="col-md-1 control-label">select</label>
<div class="col-md-5">
<div class="checkbox">
<input name="packersOff" class="strikethrough" value="1" type="checkbox">
<label for="packersOff">sssssssss</label>
</div>
</div>
</div>
你的CSS:
.strikethrough:checked + label {
text-decoration:line-through
}
答案 4 :(得分:0)
jQuery解决方案:
$('#packersOff').change(function() {
if ($('#packersOff').prop('checked') ) {
$('#test').css('text-decoration','line-through');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group ">
<label for="inputName" class="col-md-1 control-label">select</label>
<div class="col-md-5">
<div class="checkbox">
<label for="packersOff" id="test">sssssssss</label>
<input type="checkbox" name="packersOff" id="packersOff" class="strikethrough" value="1" />
</div>
</div>
</div>
答案 5 :(得分:0)
这对我有用。
li.my-item:hover span { visibility: visible; }
li.my-item span { visibility:hidden; }