• 締切済み

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

input type = button と指定するとデフォルトのボタンが表示されます。 このボタンの形は角に丸みがついています。 ボタンに色を付けようとして、 input type = button  style="background-color:#00f000" とすると、ボタンは緑色になるのですが、 このボタンの形は角に丸みがついていません。 デフォルトのボタンの形に色をつけるにはどうしたらいいのでしょうか。 よろしくお願いします。

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

 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-html401j/interact/forms.html#edef-BUTTON )  ただし、ユーザーインターフェースに関わるこの様な要素やポインター、スクロールバーは手をつけないほうが良いです。そんなもの目的でユーザーが尋ねてくるわけじゃない。逆に追い出すことになりかねません。  

Horirin39
質問者

お礼

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

回答No.1

ブラウザや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については自分で調べてください。 どの程度を目指しているのかはわかりませんが覚えておいて損はないです。 (覚えなくてもその都度調べればいいです)

Horirin39
質問者

お礼

早速のご回答ありがとうございました。 デフォルトのボタンを使うよりも、CSSで定義したボタンを使うことを検討します。

関連するQ&A