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

情報アーキテクチャの分類

今回は情報の分類に関して。 ようはソフトウェア上に情報をどのように配置するかということについてです。 参考書では情報を大きく4つに分けています。 Contents1 オブジェクトのリスト2 アクション …

no image

Seleniumの値基本動作まとめ

以前、「Seleniumでの画面テスト」というエントリーでのテストフレームワークとして、Seleniumを紹介しました。 上記のエントリーですが、単なるインストールと基本的な起動、簡単な文字入力ぐらい …

no image

アプリケーションの画面構成に関して

アプリケーションの画面の設計スタイルに関してよく使われるものを。 Contents1 2パネルのセレクタ2 カンバスとパレット3 1ウィンドウでのドリルダウン4 代替表示5 ウィザード6 オンデマンド …

no image

laravel Mix

Contents1 laravel Mix2 インストール laravel Mix 実務でlessを使っていて便利なのですが、コンパイルをatomのプラグインで行っていました。 ※保存されると自動的に …

no image

css tips display:table,marginの相殺,font-size指定,margin上下の%など

昨日、喫茶店でみていた参考書でみたCSSのネタに関して忘れないようにメモ。 Contents1 display:table2 inputのfocus時の青を消す3 marginの相殺4  font-s …