[HTML & CSS General] CSS で form tag を装飾するあれこれ

memo.

select

Bootstrap のセレクトボックスは丸みを帯びていますが appearance: none で打ち消せます。

• css – Remove border radius from Select tag in bootstrap 3 – Stack Overflow
• Can I use… Support tables for HTML5, CSS3, etc

上書きしてカスタマイズ。

• CSSだけで <select> をカスタマイズする – Qiita

radio, checkbox

下記の appearance 手法で上書きできるかと思いきや、Firefox や IE, Edge ではブラウザ定義の表示が上書きできません。

• html – Is it possible to change the color of selected radio button’s center circle – Stack Overflow

そのため、input[type="radio"] display: none で消した後に疑似要素で書きます。

• ついつい押したくなる、CSS3を使ったラジオボタンのデザイン｜Webpark
• cssだけでcheckboxやradioのデザインを変更 – wevdev

補遺

画像を使う方法含め、その他の要素の装飾など参考サイト。

• フォーム周りで覚えておくと便利なCSS Snippets | NxWorld
• CSS3とjQueryでフォームを美しく装飾する方法 | Webクリエイターボックス
• フォームの使いやすさやデザイン性を向上させる33の方法 | Stronghold
• SassやCSSでチェックボックスやラジオボタンをカスタマイズする方法 | Engineers’ Blog