フォームのスタイリングPart2

テキストエリアの右下の//を消す

textarea {
　　resize: none;
}

フォームパーツのデフォルトのスタイル変更

ラジオボタンの丸い部分や、ドロップダウンリストの下矢印などのデフォルトのスタイルを消す方法は以下。

select {
　　appearance: none;
}

ドロップダウンリストの矢印を新しく作りたいときは、backgroundプロパティを使って矢印の画像を配置する。
例えばこんな感じ。

select {
　　appearance: none;
　　background-image: url(../img/yajirushi.png);
　　background-size: 20px;
　　background-repeat: no-repeat;
　　background-position: 90% center;
}

フォームの枠線の削除

borderあててもフォーカスしたとき黒枠でてきたりするので、とりあえず以下を当てておこう。

input {
　　outline: none;
}

borderもoutlineも枠線に関するプロパティだけど、共存できてしまうっぽい。そしてフォームのデフォルトのスタイルはoutlineで指定されているので上のスタイルを当てれば問題ない。
間違いがあったらご指摘お願いします～