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

2021年7月24日

　FireFox をインストールしたので、サイトの表示を見てみると、form の見た目が少し違います。そのため、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;
}

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

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