11

我正在尝试使用 font-awesome 自定义复选框的外观，并正确缩进标签的所有文本。我已经自定义了复选框的外观，这使得缩进文本的常用方法不起作用，因为我隐藏了实际的复选框（请参阅下面的 CSS）。

目前，我获得以下（左），而我想要右边的：

目前看来 所需视图

我使用了以下代码（参见JSFiddle）：

CSS

受这个简单的 CSS checkboxes的启发，我使用以下内容来格式化我的复选框，并使用 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>

我试图修改and选择器的margin-leftandtext-indent属性，但没有任何成功。labellabel:before

知道如何在使用漂亮的字体真棒图标时获得正确的缩进吗？

非常感谢您的帮助！

4

3 回答 3

9

添加此样式（在 Chrome 和 Firefox 上测试）

label {
    display: block;
    padding-left: 1.5em;
    text-indent: -.7em;
}

http://jsfiddle.net/tkt4zsmc/2/

最后结果：

在此处输入图像描述

于 2015-05-26T09:05:27.037 回答
2

在尝试了 fcalderan的建议并且无法为不同的浏览器获取正确的值padding-left后text-indent，我切换到了弹性框。现在很绿。

如果按照Mozilla的建议将input/label对放在s 中，则可以这样设置它们的样式。div

fieldset {
  width: 13ch;
}

fieldset > div {
  display: flex;
}

fieldset > div > * {
  align-self: baseline;
}

fieldset > div > input[type=checkbox] {
  margin: 0 0.5ch 0 0;
  width: 1em;
  height: 1em;
}
<fieldset>
  <legend>Sichtbarkeit</legend>
  <div>
    <input id="c1" checked="" type="checkbox">
    <label for="c1">Minuten</label>
  </div>
  <div>
    <input id="c2" checked="" type="checkbox">
    <label for="c2">Nur Minuten, die Vielfache von 5 sind</label>
  </div>
  <div>
    <input id="c3" checked="" type="checkbox">
    <label for="c3">Stunden</label>
  </div>
  <div>
    <input id="c4" checked="" type="checkbox">
    <label for="c4">Nur 12 Stunden</label>
  </div>
</fieldset>

于 2017-12-06T10:49:18.260 回答
1

根据 Fabrizio Calderan 的回答，我对 CSS 进行了以下修改：

label{
    display: inline-block;
    margin-left: 20px;
}

label:before{
    margin-left: -23px;
}

优点是它不会修改项目之间的间距。您可以在JSFiddle中看到最终结果。

于 2015-05-26T09:18:28.657 回答