2019年2月3日ツイートシェアB!はてブポケットフォームの各要素はブラウザによって基本となるデザインが異なります。デフォルトの状態のフォームをChromeとFirefoxで比較してみました。ChromeFirefox分かりにくいですが、文言や大きさや色、アイコンなどほぼ異なっています。これがChromeとFirefoxだけでなく、Safari、IEでもそれぞれが独自の表現をさせるので、全部のデザインが異なっている状態です。コーダーとしてはこの差異を極力なくし、デザインカンプ通りに実現することが求められます。おわり各種フォームを初期化するCSS各種フォームを初期化するCSSを紹介します。難しいことを考えずにコピペして動きをみてみてください!その後にデベロッパーツールなどで各値を変えながら覚えていくのがいいかと思います。HTML+CSSデザインレシピ」なので、こちらも合わせて読むとより理解が深まるはずです。type="text"だと思います。type="tel"、type="password"など、テキスト系のフォームは同様の指定で対応できます。none;}テキストエリアテキストエリアも先ほど紹介したテキストとほぼ同じですが、高さを指定する点だけが異なります。デザインに応じて高さだけ指定してあげてください。none;}ラジオボタンラジオボタンとチェックボックスはちょっと無理やりで、標準で出力されるラジオボタンは消して独自のラジオボタンを擬似要素で作るという指定になります。:checkedでオン・オフを切り替えられるCSSの書き方と、labelで囲うと遠くからラジオボタンを操作できるという点を知っておくと柔軟に操作できるようになると思います。標準で出力されるラジオボタンは消して独自のラジオボタンを擬似要素で作るという指定になります。:checkedでオン・オフを切り替えられるCSSの書き方と、labelで囲うと遠くからラジオボタンを操作できるという点を知っておくと柔軟に操作できるようになると思います。1;}セレクトボックス(ドロップダウンメニュー)セレクトボックスが最もブラウザ間で異なるんじゃないかと思います。右にあるアイコンの表示ですね・・・。色んな形のアローアイコンが登場するので、ここのアローアイコンを上書きして自分が用意した画像を背景として適応させるという指定を行います。none;}画像については「icooon-mono」さんなどのフリーのアイコンサイトからダウンロードして使わせてもらうと手軽かと思います。icooon-monoボタンボタンも各ブラウザによって癖がめっちゃあります。ボタンはフォーム作ったら必ず出てくる要素なので、この書き方を確実に押さえておきましょう。自分のオリジナルなデザインを当てていくという感じですね。0;}ファイル選択ファイル選択のフォームはめちゃくちゃ曲者です・・・。JavaScript(jQuery)の力を利用させてもらって無理やりデザインを作っています。チェックボックスやラジオボタンのように標準の要素は表示させないようします。labelを消した要素の代わりとして、こちらに任意のデザインを当てていきます。type="text"を用意して、jQueryの処理によって表示させるという流れです。イベントとしてchangeで拾っています。);});フォームのCSS初期化後を見比べてみる今回のCSSを適応させたフォームを再び見比べてみましょう。@haniwa008フォームのCSSを初期化する方法を紹介しました。フォームのデザインを再現するコーディング作業は実務でも頻繁に登場するので、自身でも扱えるようにしておきましょう。いっても暗記する必要はなく、ほとんどは決まりきった指定方法になります。どこを変更すれば色が変わるのか?サイズを変更できるか?などが分かれば大丈夫です。リンクこのページが役に立ったらいいね!お願いします運営の励みになります...。各種SNSに共有するためのオリジナルなシェアボタン(URL)の作り方はにわまんWordPressが好きなフリーのWebコーダー。300件以上のWordPressカスタマイズを対応してきました。