デフォルトのボタンの形で色をつけたい

input type = button
と指定するとデフォルトのボタンが表示されます。

このボタンの形は角に丸みがついています。

ボタンに色を付けようとして、
input type = button 　style="background-color:#00f000"
とすると、ボタンは緑色になるのですが、
このボタンの形は角に丸みがついていません。

デフォルトのボタンの形に色をつけるにはどうしたらいいのでしょうか。

よろしくお願いします。

No.2 回答者： ORUKA1951 回答日時： 2012/09/30 21:45

　CSS3を使えばデザインを変えることは出来ますが、CSS3のborder-radiusは使えるブラウザが限られています。

　最も簡単なのは、
<button name="submit" value="送る" type="submit">
送る<img src="./icons/button.gif" alt="ナイス"></button>
など、button要素を使うほうが良いです。
17.5 BUTTON要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )

　ただし、ユーザーインターフェースに関わるこの様な要素やポインター、スクロールバーは手をつけないほうが良いです。そんなもの目的でユーザーが尋ねてくるわけじゃない。逆に追い出すことになりかねません。

　

この回答へのお礼

ご回答ありがとうございました。

デフォルトのボタンをやめて、形を統一したいと思います。
BUTTON要素を勉強して組み込みたいと思います。

お礼日時：2012/10/01 17:52

No.1 回答者： idhokanohi 回答日時： 2012/09/30 17:18

ブラウザやOSによってデフォルトのボタンは様々なので答えることはできません。

どの環境でも同じように表示されるリッチな感じのボタンを実装するには画像を用意する必要があるでしょう。
CSSだけでやるのなら
<style>
input[type="button"]{color:blue;background:white;border:double 3px blue;border-radius:5px;}
input[type="button"]:hover{color:green;border-color:green;}
input[type="button"]:active{color:red;border-color:red;}
</style>
<input type="button" value="ボタン" />
みたいな感じかなぁ
CSSについては自分で調べてください。
どの程度を目指しているのかはわかりませんが覚えておいて損はないです。
（覚えなくてもその都度調べればいいです）

この回答へのお礼

早速のご回答ありがとうございました。

デフォルトのボタンを使うよりも、CSSで定義したボタンを使うことを検討します。

お礼日時：2012/10/01 17:47