Question

使用TB，是否可以设置收音机或复选框的样式，使其显示字形而不是收音机或复选框的默认样式？我想使用glyphicon glyphicon-star表示未选中，然后glyphicon glyphicon-star-empty表示已选中。

Answer 1

没有javascript你可以修改样式......在我看来它是一种黑客，但它很有趣，因为我意识到boostrap使用了一个图标字体#newb。

HTML

<input type="checkbox" class="glyphicon glyphicon-star-empty" >

CSS

.glyphicon:before {
     visibility: visible;
}
.glyphicon.glyphicon-star-empty:checked:before {
    content: "\e006";
}
input[type=checkbox].glyphicon{
     visibility: hidden;        
}

尝试HERE

Answer 2

仅针对那些有同样问题且来自Google的人（我没有找到任何方便的答案）。

我修改了这样的东西并在当前的Chrome，Firefox和IE中进行了测试。使用此方法，您还可以使用其他所需的复选框。只需给出“已选中”和“未选中”的课程。

对于每个复选框，请执行以下操作：

<input id="checkbox1" class="icon-checkbox" type="checkbox" />
<label for="checkbox1">
  <span class='glyphicon glyphicon-unchecked unchecked'></span>
  <span class='glyphicon glyphicon-check checked'></span>
  Checkbox 1
</label>

并添加到您的CSS：

input[type='checkbox'].icon-checkbox{display:none}
input[type='checkbox'].icon-checkbox+label .unchecked{display:inline}
input[type='checkbox'].icon-checkbox+label .checked{display:none}
input[type='checkbox']:checked.icon-checkbox{display:none}
input[type='checkbox']:checked.icon-checkbox+label .unchecked{display:none}
input[type='checkbox']:checked.icon-checkbox+label .checked{display:inline}

Answer 3

在官方网站上，javascript部分包含复选框样式组和单选按钮作为按钮组的示例。它位于按钮部分here下面。

而不是在按钮内写入＆＃34;选项1＆＃34;，而是放置您的glyphicon。如果您只想要一个复选框，我想您可以取消按钮组，只需按一个按钮。

要删除按钮外观并仅显示您的图标，请使用＆＃34; btn-link＆＃34;类。

我自己没有尝试过，但我认为没有理由不这样做。

Answer 4

这是一个纯角度解决方案，用于在glyphicon之间切换以有条件地显示页面上的内容。我发现IE中的CSS解决方案失败了。

这不仅仅是你的问题，但我认为在屏幕上切换某些东西很有用。

<p ng-init="toggle = false" ng-click="toggle = !toggle" title="@Resources.Label_HideShowCustBiller" style="cursor:pointer" class="glyphicon" ng-class="{true: 'glyphicon-chevron-up', false: 'glyphicon-chevron-down'}[toggle]"></p>

<div ng-show="toggle">
    //what you want to show here
</div>

Twitter Bootstrap电台/复选框 - 如何放置glyphicon

4 个答案: