web-dev-qa-db-ja.com

Twitter Bootstrap radio / checkbox-グリフィコンの配置方法

TBを使用して、ラジオまたはチェックボックスのデフォルトのスタイルの代わりにグリフィコンを表示するようにラジオまたはチェックボックスをスタイルすることは可能ですか？ glyphicon glyphicon-starを使用してチェックされていないことを示し、次にglyphicon glyphicon-star-emptyを使用してチェックされていることを示します。

csstwitter-bootstrap-3glyphicons
10
StackOverflowNewbie

公式ウェブサイトのjavascriptセクションには、チェックボックスとラジオボタンのグループをボタングループとしてスタイリングする例があります。ボタンセクションの下にあります here 。

「オプション1」と表示されたボタン内にテキストを配置する代わりに、代わりにグリフィコンを配置します。チェックボックスが1つだけ必要な場合は、ボタングループを削除して、ボタンを1つだけにするとよいでしょう。

ボタンの外観を削除してアイコンのみを表示するには、「btn-link」クラスを使用します。

私自身はこれを試していませんが、うまくいかない理由はありません。

2
david

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

試してみてください [〜＃〜]ここ[〜＃〜]

13
Crystal

それらのためだけに、同じ問題を抱えており、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}
9
muri

これは純粋にangularソリューションであり、グリフィコンに切り替えてコンテンツを条件付きでページに表示するソリューションです。CSSソリューションはIEで失敗することがわかりました。

これはあなたの質問よりも多くのことをしますが、私は画面上の何かの切り替えが役に立つと思いました。

<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>
2
Dan