タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
先日リリースされたChrome 119に地味だけど嬉しい新機能が実装されていたので、紹介します。 フォームのセレクトボックスで区切り線にhrを使用できるようになりました。すでにSafariでもサポートされており、これでChorme, Edgeでも使用できます。 Select element: now with horizontal rules by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 select要素内で区切り線（hr）を使用できるようになりました select要素内の区切り線（hr）の実装方法 select要素内の区切り線（hr）のデモ select要素内で区切り線（hr）を使用できるようになりました 11/1にリリースされたChrome 119では、
WEB屋さんなら、タイトルである程度察してもらえるこの問題。 昨今のWEBサイトは、スマートフォンからのアクセスがほとんどのため、デザインや操作性はスマートフォンでストレスなく使えることが最重要課題となっている。 特に、ユーザーが商品の購入を行う際に、必ず経由するであろう「フォーム」の入力。 ここがストレスなく入力できるかが、成約の肝となるのだが…。 ユーザーに入力する際に、選択肢の中から項目を選んでもらう「セレクトボックス」というものがある。 複数の選択肢の中から、ユーザーに選んでもらう、というフォームを設けたい場合は、「セレクトボックス」が最も使われていると思う。 （ラジオボタンやチェックボックスよりも癖がないため） 「セレクトボックス」とは、↓コレのことである。 今見ている端末によって、このSELECTの仕様が異なっていると思うが、iPhone端末はこんな表示になっている。 いわゆる
よりカスタマイズ可能なセレクトボックスを実現する `selectlist` 要素 2023.10.07 `<selectlist>` 要素は、デザインをカスタマイズできなかった従来の `<select>` 要素の問題を解決するために Open UI グループにより提案されている要素です。`<selectlist>` の構成要素の多くはスロットとして提供されていて、高いカスタマイズ性を備えているのが特徴です。 <selectlist> 要素は 2023 年 10 月 7 日現在 Chrome Canary の Experimental Web Platform features flag を有効にした場合のみ使用できる実験的な機能です。この記事の内容は将来変更されるおそれがあります。 <selectlist> 要素とは <selectlist> 要素は Open UI グループにより提案され
前回に、iOSのセレクトボックスが使いづらい問題についてまとめました。 iOSブラウザのセレクトボックスUIが使い辛すぎ問題 僕の作ったサイトでは、iOSのユーザーが70%を超えるほど多く、かつプロフィールの送信では<select>を多用していたため、どうにかしたいと思っていました。 そのため、デバイス問わず、セレクトボックスをモーダル選択に置き換えるプラグイン「selmodal.js」を作成しました。 iOSデフォルトのセレクトボックスとプラグイン導入後の比較です。 後者のほうがサクサク入力を完遂できることが見て分かると思います。 主にiOSブラウザのユーザービリティ向上のための対策用プラグインなため、iOSユーザーの割合を見て導入を検討してみてください。 <head> <!-- プラグインのCSSを読み込む --> <link href="css/selmodal.css" rel="
【CSS】セレクトボックスのプルダウンをデザインできるselectmenuが便利すぎた。 - Qiita
はじめに みなさんは、<select> タグを使う時、<option> をいい感じのデザインしたいと思ったことはないでしょうか？ 多くの方は、妥協して、<select> タグを使うか、ライブラリーを使うか、 <div>・<button>などを使いWAI-ARIA補完するなどで実装しているのではないでしょうか？ 実は、Open UIから提出された、セレクトボックスのプルダウンをデザインするための草案が、 Google Chrome チームとMicrosoft Edge チームの協力で実験的な機能として、<selectmenu> が公開されました。 そのため、この記事では <selectmenu> の具体的な内容の紹介と実装方法の解説を行います。 動作環境 <selectmenu> は、まだ実験的なものであるため、限られた環境で再現できます。 そのため、<selectmenu> が動いているの
初心者向けにJavaScriptでセレクトボックスの値を動的に生成する方法について現役エンジニアが解説しています。セレクトボックスは複数の選択肢から1つ選ぶHTMLタグになります。JavaScriptで条件によって、セレクトボックスを動的に生成する方法を解説します。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
<script src="https://unpkg.com/vue-select@latest"></script> <link rel="stylesheet" href="https://unpkg.com/vue-select@latest/dist/vue-select.css"> 導入手順 管理人が行った、動作確認サンプルを実装するために、以下の手順でソースコードを導入していきます。 このサンプルでは、検索機能付きのセレクトボックスを実装します。 step 1ライブラリの呼び出し ES6等で実装する場合 import Vue from 'vue' import vSelect from 'vue-select' import 'vue-select/dist/vue-select.css'; UMDで実装する場合（CDNを使用する場合） const vSelect = VueS
Webアクセシビリティを考慮したチェックボックス・ラジオボタン・セレクトボックス・タブ・アコーディオンの実装 | Will Style Inc.｜神戸にあるウェブ制作会社
セレクトボックスはセレクト要素自体の背景にSVGでアイコンを配置することでwrapすることなくプルダウンアイコンを表示できます。 また、こちらもフォーカスした時にoutlineをbox-shadowで表現しています。 multipleの時はheight:autoにし、プルダウンアイコンを非表示にしています。 .c-select{ &:focus{ border-color:rgba($select-focus-color,.3); outline: none; box-shadow: 0 0 0 3px rgba($select-focus-color,.2); } &:disabled{ background-color: #eee; cursor:not-allowed; } &[multiple]{ height: auto; background-image: none; padd
フォーム設置に大変役立つ優秀なプラグインMW WP Formについて、以前セレクトボックスの「選択してください」を空欄とみなす方法という記事で、「選択してください」という項目のoptionのvalue値を空欄にする方法をご紹介しましたが、この方法だと、セレクトボックスの選択が必須でない場合、確認画面で「選択してください」という文字が表示されてしまうということがわかりました。（この値はメールに送信されません） いろいろ試した結果、とりあえず対処方法が見つかりましたのでご紹介します。 JavaScriptで「選択してください」を当てて確認画面の表示問題に対処する 以前サポートフォーラムで紹介されていた方法ですが、JavaScriptで操作するこの方法を使うと確認画面に遷移後、「選択してください」などの文字が表示されることはありません。 管理画面でのセレクトボックスの設置方法
data() { return { users: [] }; }, methods: { userListLoad() { axios.get('https://example.com/users') .then( result => { Object.entries(result.users).forEach(user => this.users.push({ name: user["name"], id: user["id"] }) ); }, err => { console.log(err); } ); }, },
記事作成の背景 Ajaxって聞くけど、、、なんだ？っていうのと、個人的に動的セレクトボックスの ヒントを残しておきたくて作成しました。 なんかパッとする記事が見つけられなかったので、これが少しでも困ってる方の助けになれば幸いです。 環境 CakePHP4 （最新） jQuery MySQL 8.0 全体のコード とりあえずコード見てみるか・・・って方向けに最初に記載しておきます。 勉強会向けに色々書いてありますが、こちらの記事では必要箇所のみ抜粋して記述いたします。 https://github.com/Kurogoma939/cake_ajax_sample.git テストデータ 今回、検証環境はMAMPを用いて開発しました。 そのため、エクスポートしたSQLは以下の通りです。 保存場所 ： app/SQL/create_tabel、app/SQL/insert_table CREATE
■前説 お客様からのご要望で自由に入力できるプルダウンボックス（セレクトボックス）がほしい、要するに、選択できるし、入力できるプルダウンボックス（セレクトボックス）があったら、お客様の作業効率がアップするではないかという考え方です。 真っ先に「Vue.js」を思い出しましが、プロジェクトにjqueryを既に使っているし、ライブラリ増えるとことで画面のロード時間が若干落ちるし、社内システムの癖に、セキュリティ検査が厳しくて、新規ライブラリを使う理由と審査の対応がめんどくせーと嫌なので、「Vue.js」をまずは、諦めました。 HTML5の「datalist」も検討しましたが、残念ながらHTML5の「datalist」は一回値を選択した後に、ほかの値を選択したい場合、現在値をクリアしない限りに、プルダウンボックス（セレクトボックス）が永遠に出れなくなるという非常に不思議な挙動があるため、「dat
フォームパーツのカスタマイズって難しいですよね？ 中でもセレクトボックス（select option）をCSSでカスタマイズする時は手を焼きます。 ということで今回はセレクトボックスの書き方、CSSでのカスタマイズ方法をケース別にまとめてみました。 スニペットも用意しています（随時追記します）。WordPressの「MW WPフォーム」や「Contact Form 7」のカスタマイズにも応用可能なので参考にしてください。 かみーゆ/フロントエンドエンジニア 資金ゼロからフィリピンで起業した海外ノマドエンジニア。IT業界10年以上でテクニカルディレクター（技術責任者）・エンジニア講師・ブリッジSEを経てLenzTechnologies Inc.を設立し、代表を務める。CMS concreteCMSエバンジェリスト。テックブログ以外も「磨耗しない人生」や「海外ノマド」のライフスタイルについて発
Advanced Custom Fieldsでセレクトボックスなどの選択肢を動的に設定する方法｜WEB TIPS～ホームページ制作の覚え書き
ワードプレスでカスタムフィールドの作成にAdvanced Custom Fields（以下ACF）を使用している方は多いと思います。長ったらしいカスタムフィールドのコードを書かずに済む、とっても便利なプラグインですよね。 選択タイプのカスタムフィールド（セレクトボックス・ラジオボタン・チェックボックス）に、ACFのフィールド作成画面から直接選択肢を設定するのではなく、変数などを入れたいと思った事はないでしょうか。 今回は、ACFの選択系フィールドに変数などを取り込んで、選択肢を動的に設定する方法です。 今回やりたい事 ちょっと伝わりづらいかもしれませんので書いておきますが、今回やりたい事は以下のような事です。 たとえば、サッカー教室のサイトがあったとします。 カスタム投稿タイプ「教室」と、カスタム投稿タイプ「先生」があります。 「教室」の編集画面に「担当の先生」というセレクトボックスを作り
【laravel】1つ目のセレクトボックスの値に応じて2つ目のセレクトボックスの候補を変えるプログラム(備忘録) - Qiita
はじめに 作成や編集においてプルダウンを配置することは少なくないと思う。 また場合に応じて、1つ目の選択肢次第で2つ目の候補を変えたいと考えることがある。 今回はそんな実装。 前提 laravel9 php8 Controllerを編集する public function create() { $trParts = TrPart::pluck('part_name', 'id'); $trSettypes = TrSettype::pluck('set_type', 'id'); $trMenus = TrMenu::pluck('menu', 'id'); $today = date("Y-m-d"); return view('trrecords.create', compact( 'trParts', 'trSettypes', 'trMenus', 'today', )); } p
すごく地味な話ですが、セレクトボックスの矢印をデザイン通りにしようと思ったらデフォルトの矢印では駄目な場合があります。 これはCSSでカスタマイズすることが出来ます（画像にも出来ます） 今回はデフォルトの矢印を非表示にして、デザイン通りの矢印にする2つの方法についてコードとデモで解説していきます。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
地味だけど嬉しい新機能！ フォームのセレクトボックスで区切り線にhrを使用できるようになりました
iOSブラウザのセレクトボックスUIが使い辛すぎ問題 | キノコログ
よりカスタマイズ可能なセレクトボックスを実現する `selectlist` 要素
セレクトボックスをモーダルウィンドウで選択できるjQueryプラグインを作成 | キノコログ
JavaScriptでセレクトボックスの値を動的に生成する方法を現役エンジニアが解説【初心者向け】
高機能なセレクトボックス「vue-select」の使い方 | カバの樹
MW WP Formセレクトボックス未選択時確認画面で空白にする方法
Vuetify でフィルタリング機能付きセレクトボックスを実装する - Qiita
Ajaxを用いて動的セレクトボックスを作成する（CakePHP） - Qiita
入力できるプルダウンボックス（セレクトボックス） | ステップ
コピペでOK！CSS セレクトボックス（select option）のカスタマイズ方法
【CSS】セレクトボックス(selectボックス)の矢印のデザインをカスタマイズする方法
yuu0.st.coresv.net
minatoblue.hatenadiary.jp
catanuki.com
stw-fortune.com
nozomi1.px.ebb.jp
www.suntory.co.jp