如何在CSS中使用自定义图标自定义复选框的标签上添加缩进缩进？
nbeuchat
我正在尝试使用font-awesome自定义复选框的外观，并正确缩进标签的所有文本。我自定义了复选框的外观，这使缩进文本的常用方法不起作用，因为我隐藏了实际的复选框（请参见下面的CSS）。
目前，我获得以下内容（左），而我想要右侧的：
我使用了以下代码（请参阅JSFiddle）：
的CSS
受到此简单CSS复选框的启发，我使用以下命令以惊人的font-awesome格式设置复选框：
input[type=checkbox] {
display:none;
}
input[type=checkbox] + label:before {
font-family: FontAwesome;
display: inline-block;
content: "\f096";
letter-spacing: 10px;
cursor: pointer;
}
input[type=checkbox]:checked + label:before {
content: "\f046";
}
input[type=checkbox]:checked + label:before {
letter-spacing: 8px;
}
的HTML
<input type="checkbox" id="box1" checked="">
<label for="box1">Item 1: some long text...</label>
<br>
<input type="checkbox" id="box2" checked="">
<label for="box2">Item 2: some long text...</label>
<br>
<input type="checkbox" id="box3">
<label for="box3">Item 3: some long text...</label>
我尝试修改和选择器的margin-left和text-indent属性，但未成功。labellabel:before
知道使用精美的字体图标时如何正确缩进吗？
非常感谢您的帮助！
Fabrizio Calderan喜欢树木
添加此样式（在Chrome和Firefox上均经过测试）
label {
display: block;
padding-left: 1.5em;
text-indent: -.7em;
}
http://jsfiddle.net/tkt4zsmc/2/
最后结果：
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
使用自定义CSS复选框的Boostrap折叠
- 2
在symfony中使用自定义标签创建复选框
- 3
如何在反应物料表的列中添加自定义复选框？
- 4
如何在css中创建自定义复选框
- 5
自定义复选框和标签对齐
- 6
如何在Geany中自定义缩进
- 7
自定义复选框和自定义单选框的CSS
- 8
添加自定义角度复选框
- 9
自定义Android复选框
- 10
自定义复选框问题
- 11
CSS：自定义复选框不起作用
- 12
Jquery 验证自定义 css 复选框
- 13
如何禁用自定义复选框的单击事件
- 14
使用复选框单击自定义列表
- 15
使用Javascript获取复选框的自定义属性
- 16
自定义CSS复选框仅在标签具有“ for”属性时有效
- 17
网格中的CSS自定义复选框-无法删除原始复选框
- 18
在IE中使用CSS列宽时，自定义Bootstrap复选框会呈现错误
- 19
聚合物1：如何使用自定义元素动态设置纸张复选框标签
- 20
如何在自定义复选框视图中保留支持库复选框的样式？
- 21
在模板中使用Wordpress自定义字段复选框
- 22
如何将图像添加到自定义复选框的背面
- 23
javascript 使用自定义属性添加复选框选中的值
- 24
自定义复选框：如何检查复选框是否被选中
- 25
CSS如何设置自定义复选框刻度符号的“内容” /“背景”属性的样式？
- 26
如何在自定义适配器中跟踪选中的复选框？
- 27
如何在Android中制作自定义复选框？
- 28
如何在文本旁边放置自定义图像而不是复选框？
- 29
如何在wordpress插件的自定义元框中保存多个复选框值？
我来说两句