• 締切済み

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

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

  • Input Type Buttonの色の変え方

    <INPUT type="button" name="BUTTON02" value="テスト" style="color: white;background-color:black;border-color: red;"> これ↑とこれ↓サンプルカラーで何度か試してみましたが、色が変わりませんでした。 <INPUT type="button" name="BUTTON02" value="テスト" style="color: #99CC99 ;background-color:#990033;border-color: #9933FF;">  どこが違うのでしょうか? お手数をお掛け致しますが、宜しくお願い致します。

  • JavaScript ボタンで指定の箇所を変更する方法

    よろしくお願いします。m(_ _)m 現在下記ソースの様なチェックボックスで出来たテーブルフォームを作成しております。 【やりたい事】 1.ボタンを作りたい 水色(22BBFF)ボタンを1度押下すると紫色(CC55EE)に変わり もう1度押下すると赤色(FF3300)にもう1度押下すると水色(22BBFF)に戻る。(水色→紫色→赤色→水色→紫色→・・・) 2.行単位・列単位で一括で変更したい 縦1、または横1などのボタンを押下するとボタンに対する行or列のボタン全てが一括で変更されるようなものをつくりたい という事を行いたいと思い、色々調べてみたのですが、 発見できませんでしたので質問させていただきました。 どうかお助けください。m(>_<)m -- <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <TITLE></TITLE> </HEAD> <BODY> <form name="F1"> <table border="1"> <tr> <td>一覧</td> <td>縦1<br><input type="button" name="tate_btn001" id="x1y0" style="height:15px; width:15px; background-color:22bbff;" onClick="tate(1)"/></td> <td>縦2<br><input type="button" name="tate_btn002" id="x2y0" style="height:15px; width:15px; background-color:22bbff;" onClick="tate(2)"/></td> <td>縦3<br><input type="button" name="tate_btn003" id="x3y0" style="height:15px; width:15px; background-color:22bbff;" onClick="tate(3)"/></td> </tr> <tr> <td>横1 <input type="button" name="yoko_btn001" id="x0y1" style="height:15px; width:15px; background-color:22bbff;" onClick="yoko(1)"/> </td> <td><input type="button" name="btn001" id="x1y1" style="height:15px; width:15px; background-color:22bbff;" onclick="" /></td> <td><input type="button" name="btn002" id="x2y1" style="height:15px; width:15px; background-color:22bbff;" onclick="" /></td> <td><input type="button" name="btn003" id="x3y1" style="height:15px; width:15px; background-color:22bbff;" onclick="" /></td> </tr> <tr> <td>横2 <input type="button" name="yoko_btn002" id="x0y2" style="height:15px; width:15px; background-color:22bbff;" onClick="yoko(2)"/> </td> <td><input type="button" name="btn004" id="x1y2" style="height:15px; width:15px; background-color:22bbff;" onclick="" /></td> <td><input type="button" name="btn005" id="x2y2" style="height:15px; width:15px; background-color:22bbff;" onclick="" /></td> <td><input type="button" name="btn006" id="x3y2" style="height:15px; width:15px; background-color:22bbff;" onclick="" /></td> </tr> <tr> <td>横3 <input type="button" name="yoko_btn003" id="x0y3" style="height:15px; width:15px; background-color:22bbff;" onClick="yoko(3)"/> </td> <td><input type="button" name="btn007" id="x1y3" style="height:15px; width:15px; background-color:22bbff;" onclick="" /></td> <td><input type="button" name="btn008" id="x2y3" style="height:15px; width:15px; background-color:22bbff;" onclick="" /></td> <td><input type="button" name="btn009" id="x3y3" style="height:15px; width:15px; background-color:22bbff;" onclick="" /></td> </tr> </table> </form>

  • ボタンの並び替えとマウスイベント

    分かりにくいかも知れませんが、以下のソースを用いてJavaScriptの部分でボタンの並び替え、 マウスイベントを実行したいんですが、うまく実行できないので教えてください。 <html><head><title>a</title> <input type='button' value='34' style='background-color:#f60;left:137px;position:absolute;top:100px;width:100' onMouseOver='b()'> <input type='button' value='58' style='background-color:#f60;left:163px;position:absolute;top:100px;width:100' onMouseOver='b()'> <input type='button' value='100' style='background-color:#f60;left:250px;position:absolute;top:100px;width:100' onMouseOver='b()'> <SCRIPT LANGUAGE="JavaScript"> function a(){ ここでボタンをvalue='数値'の小さい物が最前に来るよう並び替え (value = 100,58,34の順でhtmlで書くのではなく、ここで並び替えをしたい) } function b() { ここでマウスがボタンに乗ったらそのボタンを最前に表示したい } </SCRIPT></body></html> function a,bの部分を教えてもらえると幸いです。 以上、質問が下手で分かりづらいですが、よろしくお願いします。

  • フォームのボタン上に2色つける

    フォームのボタン上に書かれている文字に 色を付けたいと思います。 スタイルシートをつかって <input type=button value="検索*" name="submit" style="color:#FF0000;" > こんな感じにすると「検索*」という文字が赤くなります。 でも、私がやりたいと思っているのは、 「検索」は黒で「*」は赤く表示したいのです。 こんな事って出来ますでしょうか? ボタンの上に画像をはったりしないとダメでしょうか?

    • ベストアンサー
    • CSS
  • 色をラジオボタンで選択

    エレメントでボタンを押すと色を変えるJavaScriptです。 検索をしながら ボタンで一度変えることはできるようになりましたが <script type="text/javascript"> function effect() { var element = document.getElementById("sample"); element.style.color = '#000000'; } </script> <button onclick="effect()">チェンジ</button> <span id="sample">■□□■</span> ラジオボタンで選択するようにしたいのですが どのようにすればよいでしょうか? うまくいく方法を教えてください。 ブラウザーはGoogle Chrome最新版です。 どうしてもできなければ Firefoxでもかまいません。 <script type="text/javascript"> function effect() { var element = document.getElementById("sample"); element.style.color = '#000000'; } </script> <input type=radio name="colorcode" value="#000000" checked>黒 <input type=radio name="colorcode" value="#ff0000">赤 <input type=radio name="colorcode" value="#00ff00">緑 <span id="sample">■□□■</span>

  • 選択によってsubmitボタンの色を変える

    先程関連質問の回答をいただいた者なのですが、ラジオボタンの内容によってsubmitボタンの色を変えるところまで実現したいのですが、東京ならsubmitボタンはピンク、大阪ならsubmitボタンはブルーにしたいと思います。この場合は、submitボタンのところでIF文で分岐させればいいものでしょうか。 <html> <head> <script Language="JavaScript"> <!-- function set( n ) { document.myFORM.Submit.value = document.myFORM.elements[n].value; } // --> </script> </head> <body onLoad="set(0);"> <FORM ACTION="add.cgi" METHOD="POST" name="myFORM"> <INPUT TYPE="RADIO" NAME="Radio" VALUE="東京" onClick="set(0);" STYLE="background-color:pink" checked> <INPUT TYPE="RADIO" NAME="Radio" VALUE="大阪" onClick="set(1);" STYLE="background-color:blue"> <INPUT TYPE="SUBMIT" NAME="Submit" VALUE="★" STYLE="background-color:pink"> </form> </body> </html>

  • カーソルを重ねたときのボタン

    <input Style="background-color:#00ff00; color:#ffffff; border-style:solid; border-color:#ffffff; border-width:0 2;" type="button" value="メルマガ" onclick="javascript:window.location.href='URL'" title="ボタンです。クリックしてね"> ■デザイン「ボタン」の作り方を知りましまた。^^ でも、カーソルを乗せたただけでは、なにも変わらないので、 「ポタン」なのかどうか、文中などにあると、「ボタン」だと気がつきにくいです。 質問です。 デザイン「ボタン」の場合に、カーソルを乗せた(重ねた)とき、なんでもいいのですが、背景でも、文字でもいいのですが、「色」変わりませんか? やり方がありましたら教えてください。お願いいたます。 (ちなみに、今は、title="ボタンです。クリックしてね の方法くらいしか思いつかないのですが、これ以外で。。。)

  • コマンドボタンの文字の色を変更したい

    HTMLで<input type = 'button' ~> でコマンドボタンを配置しているのですが、 色の変更の仕方がわかりません。 テキストならfont colorなどで変更可能だということは知っているのですが… 知っている方おりましたら、よろしくお願いします。

    • ベストアンサー
    • HTML
  • inputタグはformタグで必ず囲む必要がありますか?

    <input type="text">や< input type="button">などのinputタグは、入力欄に入力されたデータを他のファイルに送らずに同ファイル内で処理する場合も、必ず<form></form>で囲む必要があるのでしょうか? 例えば、<input type="text" id=”background_color”>に色(例:赤、青等)を入力し< input type="button" value=”変更” onClick=”change_background()”>ボタンを押すと、バックグラウンドの色が入力された色に変わるようなコードを書くとします。Javascript(change_background())の内容は同ファイルの<header></header>内に記述しますが、ここでは関係ないので割愛します。 この場合、 <body> <input type="text" id=”background_color”> < input type="button" value=”変更” onClick=”change_background()”> </body> で良いのでしょうか? それとも <body> <form> <input type="text" id=”background_color”> < input type="button" value=”変更” onClick=”change_background()”> </form> </body> とする必要が、ありますか? よろしくお願いします。

    • ベストアンサー
    • HTML
  • フォームをリセットボタンのボタンの周りの余白を消したい!

    <BUTTON type="reset" style="border-style : none; background-color: #FFFFFF;"> <IMG src="image.gif" value="リセット"></BUTTON> ※リセットボタンを画像にして背景を白、ボーダをなしにして画像のみ表示したボタンにした。 上記に記述した内容でフォームのリセットボタンを作ったのですが 画像の周りに変な余白が出るのですがその余白を消す方法ってなにかありますか? わかる方いましたら、教えてください。

    • ベストアンサー
    • HTML