勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

フォームでカラーコードを入力したい際にプラグイン無しでピッカー機能を搭載する方法

   2024/02/20  HTML

あるフォームの項目でカラーコードを入力したいというケースがあった。だいぶ前に同じようなケースがあった際はjQueryのカラーピッカープラグインを使用していたが、今はHTML5で簡単に対応できるみたい。以下に方法をメモ。

 

使用方法

カラーコードのフォーム部分に以下を追記する。

<input type="color">

 

サンプル

https://taitan916.info/sample/color/

 

注意点

iPhoneのsafariで見たところ対応しておらず、テキストボックスの形で表示された。スマホも対応したい場合は以前に記事を書いた方法を用いる。

 - HTML

  関連記事

HTML / CSSで作成したコンテンツをPDFファイルで出力する方法(TCPDF)

HTML / CSSで作成したコンテンツをPDFファイルで出力させたい。以前mp ...

tableにスクロールバーを付ける

レイアウト的にiframeじゃなくtableにスクロールバーを つけたかった。 ...

input type="number"がFirefoxやSafariで正常に動作しない

input type="number"を設置したFormがFirefoxやiPh ...

formでdisplay:none;にしてても送信される

formで特定の部分をdisplay:none;で非表示にしてても 内容は送信さ ...

ブラウザがWebP対応の場合はそのまま表示し、非対応の場合はjpg/png画像を表示させる方法

ページ表示時にブラウザがWebP画像に対応している場合はそのまま表示し、非対応の ...