在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";
}