设置特殊字符在 css 中的位置

Question

我在设置输入元素的位置时遇到了一点问题。我有一些代码，我不明白为什么我的元素在我的div 之外。请看这个：

https://jsfiddle.net/yzhL69fa/3/

<div class="panel panel-default">
  <div class="panel-heading">
     <h3 class="panel-title" id="panel-title"> Is Super </h3>
  </div>
     <div class="panel-body">
     <input class="star-checkbox" type="checkbox" id="isSuper" name="isSuperCheckbox">
  </div>
</div>

当我从输入元素中删除class="star-checkbox"时，我可以在正确的位置看到复选框输入(自定义复选框，但我需要它作为星号(。但是当我添加这个类时，我的元素超出了我的div "panel-body"。

同样，当我添加到我的班级时："star-checkobox"有人想：display: inline-grid;然后我的 checkobx 进入我的"面板主体"，但这仍然不合适。我的目标是让这个复选框看起来像星星，但在我"panel-body"的中心。我不想在那里填充和边距。最好的是，如果我的复选框看起来像星号，并出现在我的div的中心，并带有自动边距和自动填充。谁能帮我解决这个问题？

Answer 1

您可以将position : relative添加到before类中，以定位星形元素。JSFiddle.

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.star-checkbox {
    visibility:hidden;
    font-size:60px;
    cursor:pointer;
}
.star-checkbox:before {
    color:#FF912C;
    content: "2605";
    visibility:visible;
    position:relative;
    font-size:30px;
    top:-40px;
}
.star-checkbox:checked:before {
    color:black;
    content: "2606";
}