HTMLのselect要素がCSSでカスタマイズ可能になる

2024/09/30 12 users select要素 CSS HTML カスタマイズ select

select 要素がカスタマイズできるようになる これまで HTML の<select>要素はカスタマイズが難しい部分でした。各ブラウザのデフォルトスタイルに依存しデザインや機能を統一するのが困難でした。かといってオリジナルのセレクトボックスを作成するとなると CSS と JavaScript でイチから作成する必要がありました。 し... 続きを読む

地味だけど嬉しい新機能！ フォームのセレクトボックスで区切り線にhrを使用できるようになりました

2023/11/14 46 users Chorme ＨＲ Edge Safari 各ポ

先日リリースされたChrome 119に地味だけど嬉しい新機能が実装されていたので、紹介します。 フォームのセレクトボックスで区切り線にhrを使用できるようになりました。すでにSafariでもサポートされており、これでChorme, Edgeでも使用できます。 Select element: now with horizontal rules by Una Kravets 下記は各ポ... 続きを読む

よりカスタマイズ可能なセレクトボックスを実現する `selectlist` 要素

2023/10/07 12 users select スロット カスタマイズ 従来 要素

よりカスタマイズ可能なセレクトボックスを実現する `selectlist` 要素 2023.10.07 `<selectlist>` 要素は、デザインをカスタマイズできなかった従来の `<select>` 要素の問題を解決するために Open UI グループにより提案されている要素です。`<selectlist>` の構成要素の多くはスロットとして提供されていて、高いカス... 続きを読む

セレクトボックスをモーダルウィンドウで選択できるjQueryプラグインを作成 | キノコログ

2019/11/28 11 users モーダルウインドウ jQueryプラグイン 作成

WEB屋さんなら、タイトルである程度察してもらえるこの問題。 昨今のWEBサイトは、スマートフォンからのアクセスがほとんどのため、デザインや操作性はスマートフォンでストレスなく使えることが最重要課題となっている。 特に、ユーザー... 僕の作ったサイトでは、iOSのユーザーが70%を超えるほど多く、かつプロフィー... 続きを読む

WordPress：「Contact Form 7」でセレクトボックスやラジオボタンの選択項目によって送信先アドレスを変更する方法 | NxWorld

2018/07/23 25 users NxWorld type WordPress プラグイン 送信

WordPressで問い合わせフォームを実装したいときに便利なプラグイン「Contact Form 7」で、セレクトボックスやラジオボタンの選択項目によってそれぞれ異なるメールアドレス宛に送信されるようにする方法です。 ここでは「type」という項目名があり、それぞれ選択された場合は下記のように異なるメールアドレス宛に送信... 続きを読む

[WordPress] カスタムタクソノミーのセレクトボックス(プルダウン)による絞り込み検索を実装する方法 | TechMemo

2018/04/17 7 users TechMemo プルダウン カスタムタクソノミー 実装 検索

カスタムタクソノミーのセレクトボックスによる絞り込み検索を実装する方法をご紹介いたします。 以前、「 カスタムタクソノミーのチェックボックスによる絞り込み検索を実装する方法 」という記事を書きましたが、そのセレクトボックス版です。チェックボックスによる絞り込み検索よりもセレクトボックスによる絞り込み検索の方が、多少ですがシンプルです。 カスタムタクソノミーのセレクトボックスによる絞り込み検索を実装... 続きを読む

AbemaTV の番組表リニューアルに伴うパフォーマンス改善 - Qiita

2016/10/14 136 users Qiita AbemaTV 横スクロール パフォーマンス改善

以前の番組表 ↓↓↓ AbemaTV 新番組表 大きく変わったところ チャンネルが 横スクロールですべて見れる ようになった サイドバーに チャンネル一覧 ができた 日付切り替えがセレクトボックスから カレンダー表示 になった etc. 今まではチャンネルが 5ch 毎に区切られていたので、わざわざページを切り替えて見ないといけなかったのを、横スクロールですべてのチャンネルが一覧で見られるようにな... 続きを読む

[JS]このアイデアは面白い！セレクトボックスの選択肢をすぐに選択できるようにするスクリプト -Quick[select] | コリス

2015/11/09 276 users コリス select Quick オペレーション 挙動

フォームのセレクトボックスは多くの選択肢を配置できる便利な要素ですが、他のフォームと操作性が異なるため一連の流れで入力しにくいのが弱点です。 セレクトボックスの操作性を改善し、デザインも簡単に変更できるスクリプトを紹介します。Quickの名前の通り、すぐに選択できるようになります。 通常のセレクトボックスの挙動 セレクトボックスは、タップとクリックの2つのオペレーションがあります。これはフォームの... 続きを読む

WEB管理者は何に悩んでる？SSLサーバ証明書に関するよくある質問10選！｜Selectbox（セレクトボックス）

2015/06/09 7 users SSLサーバ証明書 Web管理者 質問10選

いまや、企業サイトやECサイトなど対外的なサイトに対して、 サードパーティのSSL認証局から発行されるSSLサーバー証明書を利用することがごく一般的となりました。 企業規模や業種を問わずサイトを運営する企業にとって サイトが安全性、信頼性があることを利用者に証明するために、 SSLサーバー証明書は欠かせないものになっています。 本資料では、SSLサーバー証明書に関してよくある質問の中から 特にお問... 続きを読む

Rails の`datetime_select`でつくるセレクトボックスを「年」「月」「日」「時」「分」で区切る - 破いて捨てたノート

2015/01/27 13 users Rails Date 日付 ノート 日本語

2015-01-25 Rails の`datetime_select`でつくるセレクトボックスを「年」「月」「日」「時」「分」で区切る Rails 日付に関するセレクトボックスを「年」「月」「日」のように日本語で区切りたいことってよくありますよね。 dateに関するセレクトボックスに関しては、 id:inouetakuya さんの「Rails の date_select でつくるセレクトボックスを... 続きを読む

入力フォームを更に便利にするjQueryプラグイン5つ | 株式会社LIG

2014/08/26 78 users 株式会社LIG jQueryプラグイン５つ 入力フォーム

お疲れさまです、デザイナーのモモコです。 以前こちらの記事「入力フォームをユーザーフレンドリーにする便利なJSプラグイン」でもいくつか紹介させていただきましたが、今回また新たに制作された入力フォームが更に便利になるプラグインを5つほど紹介したいと思います。 flexselect http://rmm5t.github.io/jquery-flexselect/ セレクトボックスの各項目をフレキシブ... 続きを読む

jQueryの独自セレクトボックスを作成するjQueryプラグイン「jQuery.customSelect()」:phpspot開発日誌

2012/12/26 27 users セレク jQuery phpspot開発日誌

jQueryの独自セレクトボックスを作成するjQueryプラグイン「jQuery.customSelect()」 2012年12月26日- jQuery Custom Select Box Plugin - jQuery.customSelect() jQueryの独自セレクトボックスを作成するjQueryプラグイン「jQuery.customSelect()」 次のように、カスタマイズしたセレク... 続きを読む

スタンフォード大学図書館のウェブサイトリニューアルについて - ささくれ

2012/09/17 35 users 外観 観測範囲 ウェブサイト http 事例

2012年8月28日にスタンフォード大学図書館のウェブサイトがリニューアルしました．自分の観測範囲ではですが，けっこうあちこちで話題になっていたように思います．図書館が何十館もあるような巨大な大学の事例は気になりますよね……． 外観から リニューアル前 http://www-sul.stanford.edu/ちょっと古めのデザインという印象を受けます．ヘッダ下部には3つのセレクトボックス（各図書館... 続きを読む

[JS]セレクトボックスの使い勝手をパワーアップするスクリプト -Select2 | コリス

2012/06/10 132 users jQuery コリス z-index スクリプト デモ

セレクトボックスを美しいデザインにするだけでなく、各アイテムに画像を配置したり、タグやプレースホルダテキストや検索の対応、セレクトボックスのコントロールなど、さまざまなことができるjQueryのプラグインを紹介します。 Select2の対応ブラウザ Select2のデモと実装 Select2の対応ブラウザ Select2の対応ブラウザは下記の通りです。 IE8+ ※IE7はz-indexを使った一... 続きを読む

CSS3でセレクトボックスをカスタマイズ[to-R]

2012/02/17 49 users Option select CSS to-R HTML

CSS3でセレクトボックスをカスタマイズ Check Tweet スマホ向けにセレクトボックスをカスタマイズする必要があったのjQuery Mobieなどが利用している方法でデザインをカスタマイズしました。 セレクトボックスはCSSでのカスタマイズはほとんど出来ないので結構トリッキーな方法です。 サンプル HTMLは次のような感じ。 <select> <option>オプションA</option>... 続きを読む

使いやすいセレクトボックスを実装できる jqselectable.js :: 5509

2011/12/07 127 users

3年くらい前に最初のバージョンを作ったjQselectableをほぼ全て書き直しました。書きなおす流れで以前のものと互換性がなくなってしまったので、新しいものとして公開します。 でもgithubのリポジトリは同じです。古いものは、古いもので残っているので、もし必要な方がいれば以前の jQselectable(v1.3) を使ってください。 jqselectable のサンプル 使い方 実行する前に... 続きを読む

Openpear で Github をリポジトリにする - Heavens hell

2011/01/31 11 users GitHub Openpear Heavens hell

2010/12/25 にリニューアルした Openpear でパッケージの設定で外部リポジトリを設定できるようになった。PHP のライブラリの開発は Github を使用しているのでこの機能はとてもありがたい。リリースした時に幾つかハマったのでメモ書き。 まずプロジェクトを作る際に外部リポジトリを選択できる。セレクトボックスで Git を選びリポジトリの URI を設定する。最初 Github の... 続きを読む