Web制作者が苦痛だと感じているselect要素の不満点と美しくスタイルするテクニック | コリス

2019/11/12 30 users クロスブラウザ対応 コリス 進化 ブラウザ フォーム

フォームをスタイルするのが苦手、中でもselect要素が最も苦手という人は少なくないと思います。Web制作者が苦痛だと感じているselect要素の不満点、select要素をクロスブラウザ対応で美しくスタイルするテクニック、select要素に対するブラウザの進化の紹介します。 The Current State of Styling Selects in 2019 下記... 続きを読む

[CSS]フォームのselect要素の特徴を把握し、各ブラウザで一貫して美しく実装するスタイルシート -select-css | コリス

2019/02/22 64 users コリス デフォルト CSS ブラウザ スタイルシート

フォームをスタイルのが苦手という人も少なくないと思います。中でもselect要素はブラウザのデフォルトが非常に使いにくく、スタイルするのに知識が必要です。 フォームのselect要素の特徴を把握し、各ブラウザで一貫して美しく実装するスタイルシートを紹介します。 select-css -GitHub select-cssの特徴 select-cssの... 続きを読む

複数選択可能なselect要素をチェックボックス対応・一括選択可能にするjQueryプラグイン・Multiple Select - かちびと.net

2014/04/18 31 users script net 備忘録 チェックボックス 一括選択

複数選択可能なselect要素をチェックボックス対応・一括選択可能にするjQueryプラグイン・Multiple Selectのご紹介。なかなか便利そうだったので備忘録です。 複数選択可能なselectボックスを直感的な操作で手軽に選択できるようにしよう、というもの。グループ化したものも一括選択できるのが個人的には嬉しかったです。 Multiple Select 動作サンプルです。 <script... 続きを読む

[JS]フォームのselect要素をHTMLの変更無しで、ミニマルに美しく使いやすくするスクリプト -Minimalect | コリス

2013/06/04 133 users jQuery コリス ミニマル スクリプト HTML

フォームのselect要素をHTMLには手を加えずに、美しいミニマルなデザインを適用し、使いやすさもアップさせるjQueryのプラグインを紹介します。 デザインのテーマも用意されており、オリジナルのテーマをスタイルシートベースでつくることもできます。 Minimalect Minimalectの特徴 Minimalectのデモ Minimalectの使い方 Minimalectの特徴 select... 続きを読む

li要素で作ったナビゲーションリンクを、Media Queriesで設定したブレークポイントでselect要素にする軽量ライブラリ・TinyNav.js - かちびと.net

2012/04/03 44 users ナビゲーションリンク ブレークポイント ウインドウサイズ

シンプルで使いやすそうだったので 備忘録。Media Queriesと併用して、 ナビゲーションリンクをselect要素 に変換するjQueryのプラグインです。 圧縮版だと300kbほどと、超軽量で、 様々なブラウザにも対応できるので 覚えておこうと思います。 ウィンドウサイズが設定したブレークポイントに達するとli要素で作ったナビゲーションがselect要素に変わってくれるので、スマフォのよう... 続きを読む

ウィンドウサイズに応じてli要素とselect要素を切り替えるレスポンシブなメニューを実装する軽量jQueryプラグイン・Responsive Menu - かちびと. net

2011/12/29 43 users ウインドウサイズ ブレークポイント select li要素

ウィンドウサイズに応じてli要素と select要素にスイッチできるjQuery プラグイン、Responsive Menuのメモ。 ブレークポイントを設定して、閲覧 するウィンドウサイズがそのポイント に達したらli要素で作ったメニュー をselectにしてコンパクト化します。 以前、CSS-Tricksでも記事になっていました(参照：Convert a Menu to a Dropdown f... 続きを読む

[CSS]ビューポートのサイズに合わせてナビゲーションの形状を変更するテクニック | コリス

2011/07/20 48 users ビューポート コリス SEL CSS ナビゲーション

ビューポートのサイズに合わせてスタイルシートを適用するMediaQueriesを利用して、ナビゲーションの形状を変更するテクニックを紹介します。 デモページ：スクリーンサイズが960pxより小さい時の表示 以下は各ポイントを意訳したものです。 実装 これら2つのナビゲーションを実装するには、ul要素とselect要素の2つが必要です。 HTML：Step 1 まずは、nav要素内にul要素とsel... 続きを読む

都道府県選択するやつ。｜CSS HappyLife

2009/07/15 671 users CSS HappyLife ヤツ Option 何処 案件

メモ。 誰かの役にも立つかもしれないしってことで、いつも過去の案件のソースとか探してペタペタしてるけど、何処で使ったのか忘れたりするのでここに貼っておこう。 select要素でマークアップ済みの都道府県のやつ <select name="都道府県"> <option value="">都道府県をお選びください。</option> <optgroup label="北海道・東北"> <option ... 続きを読む