border: noneでボタンの境界線が消える

質問

ｃｓｓは全くの初心者です。教本で勉強しながらサンプルを動かしています。
reset.cssとstyle.cssの二つを利用し、
resetでブラウザの設定をリセットする形をとっています。
resetの内容は下記です。

-------------------------
@charset "UTF-8";

* {
margin: 0;
padding: 0;
list-style: none;
font-size: 100%;
border: none;
}
img {
vertical-align: top;
}
-------------------------

ところが、実験的に検索ボタンを設けようと

<input Type="submit" name="subm" value="検索">

を追加したら、ボタンの境界線が消えてしまいました。
これを回避するにはどうしたらいいのでしょうか？

ちなみに<div>で囲って個別に境界線を設定する、という方法もあり、やってみましたが、
ボタンらしく見えませんでした。検索ボタンだけreset.cssの「border: none;」を
適用しない、なんて方法はあるのでしょうか？

回答No.2

metametamu · ベストアンサー

inputのborderを表示させたいだけならこれだけ追加すれば大丈夫だと思います。

input{
border:1px solid;
}

ただ、safari・opera等のブラウザだとボタンの形がデフォルトの状態とは違うものになってしうことがあります。

input要素に対してmarginとかpaddingとかborderとかを指定するとスタイルが崩れることが多いんです。
なので、全称セレクタはinput要素を使用する場合はリセットに使用されない方が良いということになります。
webサイト内で使っている他の要素全てを指定してリセットをかけてやりましょう。
そうすれば追加でのinputの指定が必要なくなりますし、ブラウザのデフォルトのスタイルのinput要素が表示されるはずです。

h1, h2, p, a, img, ul, ol, li{
margin: 0;
padding: 0;
list-style: none;
font-size: 100%;
border: none;
}

お礼

ご親切にありがとうございました！
＞h1, h2, p, a, img, ul, ol, li{
なるほど、こんな方法もあるんですね！
参考になりました！
とりあえずこの方法で一度乗り切ってみたいと
思います。
ありがとうございました！

回答No.1

ORUKA1951

なぜそこまでリセットするのかわかりません。リセットすれば、すべての要素について改めて設定しなけりゃならなくなる。結果的にCSSは膨大な利用になる。もちろん、あなたが、すべての要素のプロパティに関して初期値が何であるかをすべて把握しているのなら、それもよいでしょうが？

　単純にborder:noneの行を外せばよいです。
{list-style: none;
font-size: 100%;
border: none;
}
img {
vertical-align: top;
}
　はしないほうが良いと思います。
　個別に指定したほうがCSSもスリムになる。

お礼

なるほど、やっぱそうですよね。。
将来的にそのほうがいいんでしょうね。
参考になりました！ありがとうございます。