• ベストアンサー

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

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

  • CSS
  • 回答数3
  • ありがとう数5

質問者が選んだベストアンサー

  • ベストアンサー
回答No.3

inputタグでは出来ないのでbuttonタグでやってみてはどうでしょうか。 ボタンの部分は <button type="button" name="submit">検索<span class="colorred">*</span></button> でヘッドタグの最後に <style type="text/css"> <!-- .colorred{ color:#ff0000; } --> </style> のようにしてみてはどうでしょう。ちなみに上ではspanタグにclass="colorred"をしてしましたが*が強調とかの意味があるのならば<em>タグなどを指定してそれにスタイルシートを指定したほうが良いでしょう。 ただし、NN4.xでは無効みたいです。

chachachar
質問者

お礼

ありがとうございます。 buttonタグって初めて聞きました。 ためしてみたところ、私がやりたいと思っていたことに ピッタリでした。 NN4.xで使用出来ないのが ちょっと残念ですね。 とても参考になりました。

その他の回答 (2)

  • Dpop
  • ベストアンサー率51% (279/544)
回答No.2

1つのオブジェクトに、別の色を付けると言うことはできません。 やはり、画像ファイルを用意して、それをボタンとして認識させるのが良いように思えます。

chachachar
質問者

お礼

やっぱり、そうですか。 ありがとうございます。 (WinXPとWin98ではボタンの形とか違うので画像はちょっとイヤだったんですけれどしょうがないですね。ＯＳを判定して画像を差し替えようかな。)

  • Ulu_lun
  • ベストアンサー率26% (269/1019)
回答No.1

文字を途中で色を変えるにはstyleタグではなく fontタグになりますが、valueタグの中にfont タグを入れると正しく認識出来なくなりますの で「ボタンを作って貼る」のが良いと思います。

chachachar
質問者

補足

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

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • ボタン別でフォームの送信先を変えたい

    同じ場所に3つある今のフォームを1つにまとめたいのですが、 「ラジオボタン」でやるのではなく「submitボタン」によって送信先の振り分けはできないのでしょうか？ CGIなどを使って一旦クッションを置くのは問題ないです。何か参考になるサイトさんとかありましたら教えてください。 <form action="1.php" method="get" class="form" target="a" name="1"> <input type="hidden" name="s" value=90 /> <input type="hidden" name="t" value="e" /> <input type="text" name="moji" value="" size="8" /> <input type="submit" name="button" value="検索" /> </form> <form action="http://e.php" method="get" name="2" target="a"> <input type="hidden" name="test" value=et /> <input type="text" name="77" value="" size="8" /> <input type="submit" value="検索2" class="button" /> </form> <form action="http://8.cgi" method="get" target="a"> <input type="text" size="8" name="q" value="" /> <input type="submit" value="検索3" class="button" /> <input type="hidden" name="sut" value="JJ" /> </form>

    • ベストアンサー
    • CGI
  • submitボタン上の文字とvalue=の数字

    CSS3 + HTML5 でゲームを作っています。 Formのsubmitボタンを設置する必要があるのですが、ボタン上に表示する文字とvalue=の文字を分ける必要があります。 <input type="submit" name="point" value="送信する"> 上記では本来であれば数値を入れたいvalue=に、「ボタン上に表示する文字」を入れなければならないため使えません。 <button type="submit" name="point" value="10050">購入する</button> であれば、valueに数値を置き、ボタン上に文字を置けるため当方のニーズに叶うのですが、HTML5上で見るとボタンの大きさが<input type="submit>の3分の1くらいになってしまいます。 従い<button type="submit" name="point" value="10050">購入する</button> のボタンの大きさを変更する方法がわかればいいと思いますが、この方法でなくても構いません。 HTML5上で、当方のニーズに合うボタンを作るためにはどうしたらいいでしょうか?

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

    エレメントでボタンを押すと色を変える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>

  • 数カ所のフォームボタンにonMouseOverを一括指定

    //外部スタイルシート抜粋 .button{ color:#000000; background-color:#ffec93; border:1px solid #ffbb55; } //HTML本文抜粋 <INPUT class=button onmouseover="this.style.backgroundColor='#FFDF48'" onfocus="this.style.backgroundColor='#FFDF48'" onmouseout="this.style.backgroundColor='#ffec93'" type=submit value=送信> 上記のように、外部スタイルシートとHTML直接記述で、マウスカーソル操作により色変化をするフォームボタンが、同一ページ内に数カ所あります。 全部の箇所が同じ効果なので、外部スタイルシートのようにHTMLに直接記述しているonMouseOver等を一括指定できれば非常に便利なのですが、これを実現する方法はないものでしょうか。

    • ベストアンサー
    • HTML
  • フォームの「キャンセル」ボタンを押すと登録されてしまう…

    以下のようなフォームをつくっているのですが、どうもキャンセルを押すと登録されてしまいます。ごうしたらよいでしょうか？ <form id='next' name='next' method='post' action='ＸＸＸ.php'> <INPUT name='next' type='submit' id='next' value='登録する'> <INPUT type='button' value=' 戻る ' onClick='history.back()'> <INPUT name='cancel' type='submit' value='キャンセル' onClick='index.html'>

    • ベストアンサー
    • HTML
  • 選択によって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 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;">　 どこが違うのでしょうか？ お手数をお掛け致しますが、宜しくお願い致します。

  • JqueryMobileでフォームボタンを非表示

    JqueryMobileを使用している環境下でフォームボタンを非表示にする方法を探しています。 以下はID1の消去ボタンをクリックすると、ID2のボタンが消えることを期待しているものです。 しかし、ID2のボタンは消えませんでした。 どのような方法で、フォームボタンを非表示にできるのでしょうか。 なお、JqueryMobileを使用していない環境では、 問題なくID2のボタンが非表示になることを確認していますので、 JqueryMobile使用時のJavascriptの制限が何かしらありそうなのですが・・・。 <form name="myForm" action="#"> <input type="button" value="消去" name="button1" id ="1" onclick="a()"> <input type="button" value="消えるボタン" name="button2" id ="2" > </form> <script type="text/javascript"> <!-- function a(){ var n = document.getElementById("#2"); n.style.visibility = "hidden"; $('#2').button('refresh'); } // --> </script>

  • フォームボタンのvalueを渡すにはどうしたらいいのでしょうか？

    下記のソースのように「word」というテキストフィールドの 入力チェック後ボタンのvalueをword.phpに渡したいのですがどのようにしたらいいのでしょうか？ 入力チェックをせず input type="button"ではなくinput type="submit" にするとword.phpに渡せるのですが・・・ ようはＡ、Ｂ、Ｃそれぞれのボタンを押した時で word.phpでbtnのvalueをPOSTで受け取り 処理をvalue A、B、Cで分岐させたいんです。 よろしくお願いします。 <html> <head> <SCRIPT language="JavaScript"> <!-- function chk(chkfrm){ var tmp = chkfrm.word.value.length; if(tmp > 50 ){ alert("文字数が多すぎます"); } else{ chkfrm.submit(); } } //--> </SCRIPT> </head> <body> <form name="form" method="post" action="word.php"> <input name="word" type="text" id="word"> <input type="button" name="btn" value="A" onclick="chk(this.form);"> <input type="button" name="btn" value="B" onclick="chk(this.form);"> <input type="button" name="btn" value="C" onclick="chk(this.form);"> </form> </body> </html>

  • 複数ボタンのvalueを送れない

    ひとつのフォームで複数のボタンを使う方法を探していたら 次のような方法があるとのことでした。 <form method="post" name="MyForm"> <INPUT TYPE="BUTTON" VALUE="aaa" onClick="MyForm.action='hoge.cgi';MyForm.submit();"> <INPUT TYPE="BUTTON" VALUE="bbb" onClick="MyForm.action='hoge.cgi';MyForm.submit();"> </form> これで、ボタンによってVALUEを渡せるのかと思いきや、 飛んでいきませんでした・・・ 複数ボタンを用意して、ボタンによってその VALUE値を渡す方法がありませんでしょうか？

    • ベストアンサー
    • CGI

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する