実用的でユニークなチェックボックスのまとめ・「Beautiful CSS checkboxes examples」
Result CSS ScanでCSSでスタイリングされた実用的でユニークなチェックボックスが沢山紹介されています。 どれもクリックだけでコピー可能で、CSSとHTMLがセットになったコードを発行しているのでペーストするだけで実...
CSS - フォーム回り
チェックボックスにチェックが入ると入力できるようになるinput要素をCSSだけで作る
Result See the Pen Locked input field - CSS only by kachibito (@kachibito) on CodePen. ちょっと今更感ありますけど、チェックボックス...
CSSだけでチェックボックスにチェックしたらテキストに打ち消し線してチェックした数も表示する
Result See the Pen CSS-only Todo by kachibito (@kachibito) on CodePen. いわゆるTodoアプリです。 機能的に完成させるのは難しいですが、CSSで...
SVGでアニメーションしながら形状が遷移する検索フォーム
Result See the Pen Search input animation by kachibito (@kachibito) on CodePen. よくあるサーチアイコンからinput要素の下線に遷移する、みたいなの ...
CSSでinputに入力したらlabelのスタイルが変更されるようにする
Result See the Pen @supports for selectors by kachibito (@kachibito) on CodePen. :placeholder-shown疑似クラスを使ってlabelのスタ...
アニメーションエフェクト付きのtoggleボタン
Result See the Pen Pure CSS Toggle Buttons | ON-OFF Switches by kachibito (@kachibito) on CodePen. CSSのみで実装したアニメーション...
任意のテキストでチェックボックス
Result See the Pen Text Only Checkboxes by kachibito (@kachibito) on CodePen. 任意のテキストとか任意のスタイルでオリジナルなチェックボックスを作れます ...
CSSだけでcheckboxのチェック数をカウントする
Result See the Pen opWdyj by kachibito (@kachibito) on CodePen. content: counter;を使ってチェック数をカウントする、というもの JSによるもののように...
サーチアイコンをクリックすると検索窓がスライド表示する
Result See the Pen Animated search Form by kachibito (@kachibito) on CodePen. アイコンをクリックで検索窓が飛び出す、みたいなの css html ...
フォーカスするとlabelが上部に移動しながらテキストが縮小する
Result See the Pen Floating Label Pattern by kachibito (@kachibito) on CodePen. プレースホルダーに見せかけたlabelを、フォーカス時に縮小しながら上部...
アニメーションエフェクト付きのチェックボックス
Result See the Pen Delightful Checkbox Animation by kachibito (@kachibito) on CodePen. チェックするとチェックボックス内でチェックマークがアニメ...
アニメーションで移動するスライダー式のradioボタン
Result See the Pen Radio buttons as a slider by kachibito (@kachibito) on CodePen. スライダー式に見せたradioボタンです。box-shadowを使...
inputにフォーカスしたらハイライトする
Result See the Pen Focus on a textfield by kachibito (@kachibito) on CodePen. 入力時にフォーカスして視認性を高める 良い手とは言えないし使用ケースを選ぶ...
フォームの要素に入力したらlabelが浮かび上がり、表示される
Result See the Pen Float Label HTML+CSS Only! by kachibito (@kachibito) on CodePen. :validを使って実装。:validと:invalidは過去記...
labelで何の入力項目かをわかりやすく明示したフォーム
Result See the Pen Login form by kachibito (@kachibito) on CodePen. 何の項目か分かりやすく明示されたinput要素 css html via Log...
コンテンツの評価をする☆1～5をradioで作る
Result See the Pen MOLXwd by kachibito (@kachibito) on CodePen. cssでレーティングボタンを実装します。 radioボタンで作られています css html ...