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
[CSS]フレシキブルなフォームを作成するスタイルシートのフレームワーク -RMSforms
既存のフォームにも利用できる、テーブルを使用しないスタイルシートベースのフレキシブルなフレームワークをRobert M. Sandy Jr.から紹介します。
ツールチップ表示に使えるかっこいいスクリプト35 – creamu
VANDELAY DESIGNで、ツールチップ表示に使えるかっこいいスクリプトがまとまっています。 かっこいいものが揃っていますね。 Prototip 2 Prototypeを使って、シンプルなものや手の込んだツールチップを作成 Coda Popup Bubbles Codaで使われているような、ふわっと浮き上がるポップアップバブル Easiest Tooltip and Image Preview サムネイルにマウスオーバーすると、拡大画像を表示 Easy Tooltip jQuery Plugin タイトル属性をデザインしてフェードイン効果を与えられる Tooltip to Forms フォーム要素がフォーカスされたときにツールチップを表示 その他もいろいろかっこいいので、ぜひ見てみてください。 35 Useful Scripts for Tooltips 昨日はいろいろといいことがあ
CSSとJavaScriptで作るフォームエレメントのチュートリアル51 – creamu
1st webdesignerで、CSSとJavaScriptで作るフォームエレメントのチュートリアルがたくさん紹介されています。 いくつかご紹介。 ↑は、Changing Form Input Styles on Focus with jQuery。フォームの中にラベルを表示して、フォーカス時にラベルを消してくれる Turn postcard photo into a stunning comment form using CSS 古いポストカードを使ってコメントフォームをつくったようなデザインのチュートリアル CSS Tableless Form テーブルを使用しないフォームデザイン。floatとネガティブマージンを使用 テクニカルで気の利いたものが多いですね。 その他は以下からどうぞ。 » 51 Form Element Resources and Tutorials Using C
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]フォームのボタンのクリック時の点線を消去するスタイルシート
