复选框在标签内的位置在悬停或选中时隐藏/显示
[英]Positioning of checkbox inside label hidden/shown during hover or selected
问题描述
我只想在相应标签悬停或被选中时才显示该复选框。 这很容易，但是我正在努力以一种不会在显示该复选框时跳到右侧的方式来放置标签文本。
label input[type=checkbox] { display: none; } label:hover input[type=checkbox], input[type=checkbox]:checked{ display: inline; }
<label> <input type="checkbox"> text </label>
5 个解决方案
解决方案1
1 2016-04-21 13:32:15
您可以按照以下方式使用可见性代替显示：
<style>
label input[type=checkbox] {
visibility: hidden;
}
label:hover input[type=checkbox], input[type=checkbox]:checked {
visibility:visible;
}
</style>
解决方案2
1 已采纳 2016-04-21 13:32:17
也许可以使用visibility属性代替显示。
<!doctype html>
<head>
<style>
label input[type=checkbox] {
visibility: hidden;
}
label:hover input[type=checkbox],
input[type=checkbox]:checked {
visibility: visible;
}
</style>
</head>
<body>
<label>
<input type="checkbox"> text
</label>
解决方案3
1 2016-04-21 13:36:27
我看到一些选择：
- 选中文本右侧的复选框，这样文本就不会移动。
- 使用不透明度而不是可见性（某些浏览器不支持可见性）
- 为复选框设置动画效果，使文本向右滑动（因此，将复选框的宽度（或最大宽度）设置为
0，并隐藏溢出，然后通过过渡对其进行更新）
不透明度： https : //jsfiddle.net/ahmadabdul3/ghogvcsx/1/
动画的： https : //jsfiddle.net/ahmadabdul3/ghogvcsx/
<label>
<span>
<input type="checkbox">
</span>
text
</label>
label span {
display: inline-block;
max-width: 0;
overflow: hidden;
transition: max-width 0.3s linear;
}
label:hover span {
max-width: 30px;
transition: max-width 0.3s linear;
}
解决方案4
0 2016-04-21 13:25:58
一种简单的解决方案是先插入您的文本，然后插入复选框。 添加CSS以美化它。
<label>
text
<input type="checkbox">
</label>
解决方案5
0 2016-04-21 13:32:46
签出此代码签出此代码：label input [type = checkbox] {display：none; 位置：绝对； }标签跨度{margin-left：20px; } label：悬停输入[type = checkbox]，输入[type = checkbox]：checked {display：inline; }
您的代码：文本
label input[type=checkbox] { display: none; position:absolute; } label span { margin-left: 20px; } label:hover input[type=checkbox], input[type=checkbox]:checked{ display: inline; }
<label> <input type="checkbox"> <span>text</span> </label>
将复选框的标签放置在字段集中
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.