skillup

技術ブログ

UI デザイン

Bootstrapでのラジオボタンの装飾について(toggle)

投稿日:2016年1月13日 更新日:

ラジオボタンのようなn択式のチェックに関して、HTMLディフォルトのごついやつではなく、下記のようにボタンがへこんだものを実装したい場合の処理についてメモします。

下記のようなボタンの状態をtoggleボタンというようですね。

toggle

jQueryでもできるようですが、bootstrapを使うのが一番楽でしょう。

特にプラグインも入れる必要なく、下記のコードを書けばすぐに実装できます。

なお、上記の実装は正確にはradioを使っているわけではないので値を入れたい場合はJavaScriptで値をhiddenに入れて、それをPOSTで投げる必要があります。

参考リンク

Twitter Bootstrapのbuttonタグを使ったラジオボタンの値をsubmitしたい

-UI, デザイン
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

cssでのmax,minや画像の配置に関して

主に画像なんかで使われるんですが、max(min)-width(height)などの使い方に関して。 えーmax(min)はどういうときに使われるかというとまず可変な要素に対して使われることが多いです …

no image

transition関連

cssのanimationに関して。 例えばhoverしたときに色が変わる仕様はよくあることだと思いますが、transitionを入れることで時間差をつけることができます。 [crayon-62fe9 …

no image

compassについて

sassをベースにしたフレームワークがcompassです。 Contents1 compassとは?2 使用方法3 参考リンク compassとは? sassの記法をベースにCSSファイルの作成が可能 …

no image

CSSでのtableについて

tableで気を付けたいポイントなど。 Contents1 ボーダー表示2 テーブルの背景色とボーダーのスタイル3 tableのレイアウト3.1 table-layout auto3.2 table- …

no image

object-fitによる画像比率を保ったセンタリング

CSSでレイアウトを組むときにネックになるのが画像のレイアウトです。 と言うのも可変要素であり、幅を制御するのが難しかったりします。 参考リンク メインで使う画像のcssについて まあ縦長とか横長とか …

アーカイブ