こんにちは！AbeGoblinです。
さて、webデザイナーになって間もない方や、デザインばかりではなくコーディングの勉強もしたいという方にとって、<input>タグというのは非常に厄介です。普通にcssを記載しても、スタイルが当たらないんですよね。
プロはこう！
駆け出しのwebデザイナーさんやhtml/cssの勉強をしている方には申し訳ないのですが、厳しいことを言わせていただきますと、デフォルトのままinputやtextarea、selectbox等を使うことはまずありません！
当然です。社内のデザイナーさんや外注さんはしっかりとサイトの配色や余白間に合わせてinputの枠の色や幅、背景色を決めているからです。
もっというと、この人html/cssできないな…って人がデザインすることもあります（外注さんに多い傾向があります。）なので、これから紹介するコードは確実に現場で生きてきます。実際、僕も今後コピペで使用するつもりです。
まぁ調べればいろいろ出てきます。いろんなサイトを拝見しましたが、このサイトではこれがなかったり、こっちにはあったりとなかなか一つに絞り切れないのが現状のように僕は思います。
なので、僕が普段使っており、IE・chrome・firefox・safai等で使用しても問題なくリセットできるappearanceのスタイルをお教えしたいと思います。
そのコードはこれだ！！
input[type=text]{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}上記ではinput[type=text]になっていますが、「text」のところを変更すればもちろん他の者にもスタイルが適用されます！input[type=text]をinputに変えて、まとめて変更するのもいいかもしれませんね！当然textareaやselect等にも応用可能です。
まぁね、これやっとかないと感は否めないっす！
ぶっちゃけ、何でもいいんすよねリセットって。気にしないでこれ黙って貼っときましょ！って感じですかね！！
便利な使い方
便利な使い方として、このコードを使いまわしで使用するreset.cssに忍ばせておくのもいいかもしれません。そうすると、いちいちコピペをしなくても、最初の段階からすぐにスタイルを当てることができます！sassをご利用の方はmixinでもよさそうですね！
その場合はこちら！
reset.css用
input,textarea,select,option{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}mixin.scss用
@mixin inputreset{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}んで、適用したいスタイルシートにはこう！
input[type=text]{
@include inputreset;
}簡単ですね！明日からもう困らない！汎用性を意識してガシガシ使っちゃいましょう！
注意事項
実際に使用されればわかるともいますが、このappearance: none;を入れてしまうとデフォルトで適用されているスタイルが解除されてしまいます。まぁ当然といえば当然なのですが(笑)
なので、これで終わりではなくしっかりスタイルも当てましょうね！
最後に
ここまでご覧いただき本当にありがとうございます！今後もこう言ったコピペで使用できるコードをガシガシ記事にしていこうと思います！
毎日現場で使用されているソースコードを載せていくことになりますので、皆さんにとってそれなりにお役に立てるものになるはずだと思っています！
もちろん僕にとっては、とっておきのスニペット集になることが約束されています！
それではまた次回！さようならー(・ｖ・)ﾉｼ
