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

memo.

[markdown]
## select

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

> * [css – Remove border radius from Select tag in bootstrap 3 – Stack Overflow](http://stackoverflow.com/questions/24210132/remove-border-radius-from-select-tag-in-bootstrap-3)
> * [Can I use… Support tables for HTML5, CSS3, etc](http://caniuse.com/#feat=css-appearance)

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

> * [CSSだけで <select> をカスタマイズする – Qiita](http://qiita.com/hiloki@github/items/844726db4128ebb0fdd8)

## radio, checkbox

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

> * [html – Is it possible to change the color of selected radio button’s center circle – Stack Overflow](http://stackoverflow.com/questions/23167637/is-it-possible-to-change-the-color-of-selected-radio-buttons-center-circle)

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

> * [ついつい押したくなる、CSS3を使ったラジオボタンのデザイン｜Webpark](http://weboook.blog22.fc2.com/blog-entry-379.html)
> * [cssだけでcheckboxやradioのデザインを変更 – wevdev](http://webdev.jp.net/checkbox-radio-custom-css/)

## 補遺

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

> * [フォーム周りで覚えておくと便利なCSS Snippets | NxWorld](http://www.nxworld.net/tips/15-useful-css-snippets-in-form-style.html)
> * [CSS3とjQueryでフォームを美しく装飾する方法 | Webクリエイターボックス](http://www.webcreatorbox.com/tech/css3-jquery-form/)
> * [フォームの使いやすさやデザイン性を向上させる33の方法 | Stronghold](http://zxcvbnmnbvcxz.com/form-improvement/)
> * [SassやCSSでチェックボックスやラジオボタンをカスタマイズする方法 | Engineers’ Blog](https://moneyforward.com/engineers_blog/2015/03/10/sass_css_customize/)
[/markdown]