コピペで簡単！ CSSのみで、フォームの入力時にフロートする入力欄のラベルを実装するテクニックフォームの入力欄のラベルが入力時にふわりとフロートして移動するのをCSSのみで実装するテクニックを紹介します。 HTMLはinputとlabelで非常にシンプル、余計なspanなどはありません。ラベルのフロートはCSSで実装されており、コピペで簡単に使用できます。
datalistでコンボボックス（知名度が低いウェブ標準ひとりAdvent Calendar 2021 – 18日目） | Ginpen.com
知名度が低いウェブ標準ひとり Advent Calendar 2021 – 18 日目 今日は <datalist> です。コンボボックスを作れます。 <datalist> – HTML: HyperText Markup Language | MDN デモ：https://codepen.io/ginpei/pen/wvrdEeZ 基本的な使い方 <select> のように複数の <option> を子に持ちます。画面には描画されません。連携したい <input> の方からは ID を list 属性で指定します。 <input list="my-list" /> <datalist id="my-list"> <option value="Apple">Apple</option> <option value="Banana">Banana</option> <option value
知っておくと便利で役に立つHTMLの属性のまとめ
あまり知られていないけど、知っておくと便利で役に立つHTMLの属性を7つ紹介します。 Google翻訳が翻訳しようとするのを防ぐtranslate属性、リンクをダウンロードするように指示するdownload属性、アップロードできるファイルのタイプを指定できるaccept属性など、HTMLだけで実装できるのかという便利な属性ばかりです。 7 useful HTML attributes you may not know by Mariana 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに multiple属性 accept属性 contenteditable属性 spellcheck属性 translate属性 poster属性 download属性 終わりに はじめに HTMLは、Web制作の要です。しかし、多くのプロ
📝数値という理由だけで input[type="number"] 要素を使わない｜たかもそ／Web Creator.
フォームに入力する値といえば、電話番号や年齢、クレジットカード番号など様々です。しかし、数字を使っているからといってむやみに <input type="number"> 要素を使うと問題が起きます。 数字であって数値でないWHATWG の仕様には次のように書かれています。 The type=number state is not appropriate for input that happens to only consist of numbers but isn't strictly speaking a number. For example, it would be inappropriate for credit card numbers or US postal codes. A simple way of determining whether to use type=num
![📝数値という理由だけで input[type="number"] 要素を使わない｜たかもそ／Web Creator.](https://cdn-ak-scissors.b.st-hatena.com/image/square/fabaee500541121aedd5673e2ef24a6ad3fc46aa/height=288;version=1;width=512/https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F20987625%2Frectangle_large_type_2_6362b402374299fdb8316dd17855d5fb.png%3Ffit%3Dbounds%26quality%3D85%26width%3D1280)
簡単な設定で使える軽量でモダンなキーバインドライブラリ・「tinykeys」
tinykeysは簡単な設定で使える軽量でモダンなキーバインドJavaScriptライブラリです。 以前にもwhenipressというライブラリをご紹介しましたがtinykeysの方が若干使いやすい印象でした。 上にサンプルを用意しましたが、反応が無い場合はCodepen内にフォーカスしてからお試しください。 使い方も非常にシンプルです。 <script src="https://cdn.jsdelivr.net/npm/tinykeys/dist/tinykeys.umd.js"></script>tinykeysを読み込みます。 tinykeys(window, { "Shift+D": () => { alert("ShiftとDが押されました！"); }, "y e s": () => { alert("YES！はいそうです！"); } });キーの設定とキーが押されたときの内容を
【WordPress】カスタムタクソノミーを親なしのチェックボックスで追加する | バシャログ。
こんにちはfujiharaです。自宅のwifi環境に中継機を導入したら ネットワーク環境が劇的に変化してマジすげぇと感動しています。 今回はカスタムタクソノミーを追加したときに、管理画面で親なし・チェックボックスにする 方法をご紹介します。 方法 カスタムタクソノミーを通常追加するときには以下のコードで 実現すると思います。(詳細オプションは省いて、無名関数で実装しています) add_action( 'init', function () { register_taxonomy( 'bashalog', 'post', [ 'label' => 'バシャログ', ] ); } ); 上記で追加されると以下のようになります。テキストフィールドで追加していく方法 まずはこれをチェックボックスにします。meta_box_cb に post_categories_meta_boxを指定 add_a
Gutenberg（グーテンベルグ）エディターでブロックの項目を非表示にするよ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
最近七味より一味派なのがわかり、七味の黒い丸いやつが丸々入ってると歯が痛くなって毎回イラっとするアラサーのハルです。 今回はWordPressのGutenberg（グーテンベルグ）のエディターでデフォルトブロックの表示を制御する方法をまとめたいと思います。 グーテンベルグはデフォルトでたくさんのブロックが用意されている グーテンベルグエディターは、初期状態でたくさんのブロックが用意されています。 この記事を書いた時点（2020年1月）だと、 一般ブロック フォーマット レイアウト要素 ウィジェット 埋め込み の分類があり、それぞれに多くのブロックが用意されています。 プロジェクトによってはすべてを表示する必要はなく、ブロックの項目が邪魔になる場合もあります。 今回は、ホワイトリストで管理して、使うものだけ表示する方法が簡単だったので紹介したいと思います。 ホワイトリストで指定するソースコー
入力したパスワードの文字の長さに応じて背景画像が鮮明になっていく
Result パスワードの長さに応じて背景画像が鮮明になっていく、というUI ぶっちゃけ現在の主流である、テキストと色で強度を明示するのが現状は最適解に思えますが1つの方法として、パスワードの強度に合わせて何かしらコンテンツを変化させる明示方法は悪くないように思えます レイアウトやUI次第ではスマホでは明示テキストを見逃す可能性もありますというか実際どこかで体験した記憶がるので分かりやすく施工するに越したことは無いですよね JSはバニラで書かれてます javascriptconst password = document.getElementById('password'); const background = document.getElementById('background'); password.addEventListener('input', (e) => { const
Credit Card Form - Vue製のクレジットカード入力コンポーネント
Web上でものを買う場合、クレジットカード番号を入力する機会は多いかと思います。決済情報を入力する際にはなるべく手間取らないようにしないと、せっかくの決済機会を逃してしまうことになります。 そこで使ってみたいのがCredit Card Formです。アニメーションや表示を工夫してスムーズにクレジットカード情報の入力ができるようになります。 Credit Card Formの使い方 入力しているところです。入力に沿って描かれているカードの情報ができあがっていきます。 どこに何の情報が書かれているのかもビジュアル的に確認できるので入力での手間取りが減りそうです。上の画像ではVisaの情報ですが、Masterやアメリカンエクスプレスなどのカード情報を入力するとマークも変わります。Credit Card FormはVue向けのコンポーネントとなっています。 Credit Card FormはJav
Everything You Ever Wanted to Know About inputmode | CSS-Tricks
Based on my tests, inputmode is indeed supported in Opera Mini and Opera Mobile, which contradicts the Caniuse data above. I’ve reached out to see if we can sync up our findings. But before we go deep into the ins and outs of the attribute, consider that the WHATWG living standard provides inputmode documentation while the W3C 5.2 spec no longer lists it in its contents, which suggests they consid
CSSとSVGでチェックボックスを装飾しよう！
2022年4月27日 CSS, SVG CSSでフォーム内の部品を装飾するのは、昔から難儀でした。特によく使うチェックボックスは色をつけることすら難しく、様々なCSSの小技やJavaScriptプラグインを使って実装してきました。今回はチェックマークにSVGを使い、なるべくシンプルな書き方でチェックボックスを装飾してみようと思います。 ↑私が10年以上利用している会計ソフト！ チェックボックスを装飾する手順 1. HTMLマークアップ まずはHTMLを書いていきます。label タグでチェックボックスを囲うと、for 属性や id 属性の指定をしなくても label タグ内のテキストがクリック範囲となるので便利です。テキストは span タグで囲みました。この span 部分にCSSでチェックボックスを表示させる指定をしていきます。 HTML <form> <label> <input t
チェックボックスにチェックが入ると入力できるようになるinput要素をCSSだけで作る
Result ちょっと今更感ありますけど、チェックボックスがチェックされるとinputが入力できるようになるやつです。上のUIは少し違いますけど、鍵の部分がチェックボックスになっています。 よくある「同意するにチェックを入れて～」的なやつに使えそうでしょうか。 ※この同意する云々のUIの意味に対する是非はここでは割愛します cssdiv { --field-size: 50px; --field-border-color: #ccc; margin: auto; top:40px; font-size: 1rem; background: #ffffff; border-radius: 5px; position: relative; width: 400px; overflow: hidden; display: flex; background: white; } div input[
実はHTMLだけで多くのことが実現できる！知っておくと便利なHTMLの使い方
HTMLだけで多くのことが実現できるのは素晴らしいことです。一昔前までは、CSSやJavaScriptを使用しなければできなかったこと、かなり複雑なコードを書かなければできなかったことが、実はHTMLだけで多くのことが実現できます。 知っておくと便利なHTMLの使い方をまとめて紹介します。 HTML can do that? by Ananya Neogi 先日紹介した「CSSでここまでできるのか！」の続編です。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. datalist -フォームに入力候補を表示 2. dialog -ダイアログ ボックス 3. progress -プログレスバー 4. detailsとsummary -開閉パネル 5. inputmode -スマホで入力時に適したキーパッドを表示 6. inpu
フォームの内容を元に任意のUIに遷移
Result フォームの内容から別のUIに遷移する、みたいなの やってる事は割とシンプルで、作成ボタンをクリックするとレイアウト全体を包括する親ブロックのclassを別のclassと入れ替えてCSSで見た目を整えてるだけです サンプルはバッジっぽいUIですが他にも応用できますね 何かに使えそうかなぁと思ったので備忘録です 例えば非予約なイベント会場等で来場者カードを作る時に来場者にタブレットで入力してもらうと来場者カード発行の手続きプロセスを簡略できる、とか jQuery//ボタンクリックで全体のclassを入れ替えて、フォーム内容とカードUIをトグル $(".js-switch").click(function() { $(".main-content").toggleClass("as-card"); }); //画像を送信前にプレビューする var reader = new File
CSSスニペット：CSSでinputに入力したらlabelのスタイルが変更されるようにする | かちびと.net
Result :placeholder-shown疑似クラスを使ってlabelのスタイルを入力の有無でスイッチします css.input-label { color: blue; } .input :not(*):placeholder-shown, .input-label {/*入力されたとき*/ color: green; } .input-control:placeholder-shown ~ .input-label {/*入力されてないとき*/ color: red; }html<div class="input"> <input class="input-control" id="input" placeholder="hogehoge" /> <label class="input-label" for="input">入力すると色が変わります</label> </div>
Credit Card Payment Form
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
複数inputに入力された数字の合計を表示する
Result jQuery$("#myTable").on('input', '.txtCal', function () { var calculated_total_sum = 0; $("#myTable .txtCal").each(function () { var get_textbox_value = $(this).val(); if ($.isNumeric(get_textbox_value)) { calculated_total_sum += parseFloat(get_textbox_value); } }); $("#total_sum_value").html(calculated_total_sum); });複数inputに入力された数値の合算を出します。 簡易的な見積もりとかデータを扱う時に使えそうでしょうか html<table id="myTabl
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
