Chrome と FireFox でフォームの見た目

 FireFox をインストールしたので、サイトの表示を見てみると、form の見た目が少し違います。そのため、FireFox で検索ボックスの見た目が良くありません。

Chromium
FireFox

 これは、form 部品のスタイルがブラウザ毎に違うことが原因です。違いをなくすには、スタイルを細かく指定しなければいけないようです。css に次を追加しました。

input, button, textarea, select {
        font-family: inherit;
        font-size: inherit;
        box-sizing: border-box;
        border: solid 1px #888;
        padding: 0.1em;
}
input:focus, button: focus, textarea:focus, select:focus {
        border: solid 1px #000;
}

 これでほぼ見た目を合わせることができました。

Chromium
FirFox

 この様にブラウザの見た目を吸収するために、「リセット CSS」というものがあるようですが、今回は、form だけなので利用しませんでした。

web サイト

Posted by sirius