urin.github.io - CSSのみでラジオボタンとチェックボックスをトグルボタンにする

CSSのみでラジオボタンとチェックボックスをトグルボタンにする - URIN HACK

Urin.github.io Spined HTML

CSSのみでラジオボタンとチェックボックスをトグルボタンにする - URIN HACK  2018-02-04 コメント html 1 css 1 CSSのみでラジオボタンとチェックボックスをトグルボタンにする Vue.jsなどでデータバインディングするとき<input>要素がきちんと（セマンティックに）使われて欲しくなる。jQueryなどで見かけ上の動作をされても困るのだ。かといってブラウザデフォルトの<input>の見た目はダサいので格好よくはしたい。 CSSのみでラジオボタンやチェックボックスをボタン化する方法は色々と紹介されているがフォーカス、キーボード操作、flexboxによるサイズの自動調整など細かいところまで考慮されたものが少なかったので、その方法を整理してみる。 基本形 この方法のポイントは以下。 JavaScript不使用 シンプルなHTMLマークアップ ボタンサイズ自動調整 hover checked disabledなどのinput要素自身の属性のみに応じて見た目が変化 フォーカスした時にブラウザが自動で付加する枠がボタンとズレない HTML5バリデーション結果のフィードバックでボタンがきちんとフォーカスされる htmlの基本形は以下。 <!-- Radio buttons --> <div class="toggle-buttons"> <label> <input type="radio" name="radio-1"> <span class="button">Radio</span> </label> </div> <!-- Checkbox --> <div class="toggle-buttons"> <label> <input type="checkbox"> <span class="button">Checkbox</span> </label> </div> ラジオボタンとチェックボックスのカスタマイズ方法を説明しているサイトでは以下の形式もよく紹介されるがidとforの命名が必須となるので採用しない。 <div class="toggle-buttons"> <input type="checkbox" id="checkbox-1"> <label for="checkbox-1" class="button"> Checkbox </label> </div> CSSの基本形は以下の通り。色とborder関係はベースとなるボタンのデザインに合わせる必要がある。 .toggle-buttons { display: flex; } .toggle-buttons.vertical { flex-direction: column; } .toggle-buttons label { display: flex; position: relative; } .toggle-buttons [type=radio], .toggle-buttons [type=checkbox] { -webkit-appearance: none; -moz-appearance: none; position: absolute; width: 100%; height: 100%; margin: 0; padding: 0; } /* appearance: none; for IE11 */ _:-ms-lang(x)::-ms-backdrop, .toggle-buttons [type=radio], _:-ms-lang(x)::-ms-backdrop, .toggle-buttons [type=checkbox] { visibility: hidden; } .toggle-buttons .button { z-index: 1; } .toggle-buttons.vertical .button { width: 100%; } .toggle-buttons:not(.vertical) :not(:first-child) .button { border-left: 1px solid #567; border-top-left-radius: 0; border-bottom-left-radius: 0; } .toggle-buttons:not(.vertical) :not(:last-child) .button { border-top-right-radius: 0; border-bottom-right-radius: 0; } .toggle-buttons.vertical :not(:first-child) .button { border-top: 1px solid #567; border-top-left-radius: 0; border-top-right-radius: 0; } .toggle-buttons.vertical :not(:last-child) .button { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .toggle-buttons :checked + .button { background-color: #345; } .toggle-buttons :disabled + .button { cursor: not-allowed; opacity: .6; color: #def; } デフォルトのチェックボックスやラジオボタンを消す方法、その上でスタイリングする方法は以下で詳しく研究されている。 HTML フォームへの高度なスタイル設定 - ウェブ開発を学ぶ | MDN .buttonに対するスタイルは別途指定されているものとする。これから示すサンプルでは以下を用いる。 .button { display: inline-block; padding: .5em 1em; border-radius: 4px; text-align: center; color: #eff; background-color: #678; cursor: pointer; } .button:hover { background-color: #567; } .button:disabled { cursor: not-allowed; opacity: .6; color: #def; } 基本形のサンプル サンプルだけのページはこちら。 Radio Radio (required) Disabled Radio Submit Checkbox Disabled Checkbox Checkbox Checkbox Multiple lines Checkbox <form> <div class="toggle-buttons"> <label> <input type="radio"> <span class="button">Radio</span> </label> </div> <hr> <div class="toggle-buttons"> <label> <input type="radio" name="radio-1" required> <span class="button">Radio (required)</span> </label> <label> <input type="radio" name="radio-1" disabled> <span class="button">Disabled</span> </label> <label> <input type="radio" name="radio-1"> <span class="button">Radio</span> </label> </div> <hr> <button type="submit" class="button">Submit</button> </form> <form> <div class="toggle-buttons"> <label> <input type="checkbox"> <span class="button">Checkbox</span> </label> </div> <hr> <div class="toggle-buttons"> <label> <input type="checkbox" disabled> <span class="button">Disabled</span> </label> <label> <input type="checkbox" checked> <span class="button">Checkbox</span> </label> <label> <input type="checkbox"> <span class="button">Checkbox</span> </label> </div> <hr> <div class="toggle-buttons"> <label> <input type="checkbox"> <span class="button">Checkbox</span> </label> <label> <input type="checkbox" checked> <div class="button"> Multiple<br> lines </div> </label> <label> <input type="checkbox"> <span class="button">Checkbox</span> </label> </div> </form> 縦型配置のサンプル Radio Radio Radio Disabled Radio <form> <div class="toggle-buttons vertical"> <label> <input type="radio" name="radio-1"> <span class="button">Radio</span> </label> <label> <input type="radio" name="radio-1"> <span class="button">Radio</span> </label> <label> <input type="radio" name="radio-1"> <span class="button">Radio</span> </label> <label> <input type="radio" name="radio-1" disabled> <span class="button">Disabled</span> </label> <label> <input type="radio" name="radio-1"> <span class="button">Radio</span> </label> </div> </form>  2018-02-04 コメント html 1 css 1 特定のユーザ権限でのみ実行されるシェルスクリプト Please enable JavaScript to view the comments powered by Disqus. Recent Entries 2018-02-04 CSSのみでラジオボタンとチェックボックスをトグルボタンにする 2017-11-30 特定のユーザ権限でのみ実行されるシェルスクリプト 2017-02-25 Linuxローカル環境用に最小限のyumリポジトリを作成する方法 2016-11-12 fluent-plugin-dstatで取得した値が不正になる問題を解決 2015-09-19 logrotate.bat - Windowsのバッチファイルでログローテート 2015-04-05 C++で無名関数の関数ポインタを作る 2014-08-14 Jekyll 2.3.0をWindowsに導入 2014-03-02 Jekyll 1.4.2をRuby 2.0.0+Windowsに導入 2014-02-12 設置が超簡単でカスタマイズ性の高い吹き出しホバー用jQueryプラグインjquery.balloon.js 2013-08-11 要素の高さを揃える超軽量なjQueryプラグインjquery.tile.js Tags makefile fluentd html C++ Jekyll Ruby whack Batch Octopress GitHub jQuery Linux Windows gcc JavaScript css Repositories jquery.tile.js 要素の高さを揃える超軽量なjQueryプラグイン jquery.balloon.js 設置もカスタマイズも超簡単な吹き出しホバー用jQueryプラグイン wers Windows用Rubyバージョン管理ツール(rbenvのWindows版) jquery.stretchable.js 要素を浮かせて伸ばすボタンを付けるjQueryプラグイン .vimrc Vim用設定ファイル Styled with Twitter Bootstrap 3. Scripted with jQuery. Powered by Jekyll version 3.4.1. Hosted on GitHub. Managed with git. © 2013 - 2018 うりん