• ベストアンサー

disabledを使ってフォントを黒にする方法

現在作成しているHTMLに 入力不可のテキストを 作りたいと考えています。 下記の様にDISABLEDを使おうと思っているのですが そうするとフォントがグレーになります。 フォントの色を黒にする事は可能でしょうか? ご存知でしたらご教示ください。 よろしくお願いします。 <INPUT TYPE="TEXT" VALUE="AA" DISABLED /> ブラウザ IE6 OS  WindowsXP

  • HTML
  • 回答数2
  • ありがとう数3

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

  • ベストアンサー
  • howsike
  • ベストアンサー率58% (18/31)
回答No.1

readonly ではダメでしょうか。。 <INPUT TYPE="TEXT" VALUE="AA" readonly /> 【type=textの属性】 として指定できるようです。

参考URL:
http://www.tohoho-web.com/html/input.htm
toshico
質問者

お礼

回答ありがとうございます。 なるほど。 readonlyで良い気がします。 試してみます。

その他の回答 (1)

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.2

スタイルシートで反応しないみたいですね。 ただdisabledを指定するかぎり、データは 無効なので、黒くしてあたかも有効データの ように見せることは百害あって一利ないことでは?

toshico
質問者

お礼

お返事ありがとうございます。 そうなんです。 スタイルシートで無理矢理、 色を指定できるかと思って試したのですが グレーのままでした。 yambejpさんがおっしゃる通り、 無効にしたのだから グレーのままの方が良い気がしてきました(^^;)。

関連するQ&A

  • disabledの点で。

    このソースを開いて、更新ボタンをクリックすると、 2の方のテキストボックスが半透明になりますが、それは半透明にしないようにすることは可能なのでしょうか。 お願いします。 <html> <head> <title></title> <script language="JavaScript"> <!-- function setTF(){ if(document.form1.text1.value=="") document.form1.text2.disabled = true; else document.form1.text2.disabled = false; } //--> </script> </head> <body> <form name="form1"> 1<INPUT type="text" name="text1" onChange="setTF()"> 2<INPUT type="text" name="text2" disabled> <INPUT type="submit" value="登録" onClick="return setTF()" name="submit"> </form> </body> </html>

  • disabledのフィールドパラメータについて

    以下のようなフォームでdisabledになったテキストフィールドは、 値として渡されるのでしょうか? <form> <input type="text" name="test1" value="a" disabled> <input type="submit"> </form>

    • ベストアンサー
    • HTML
  • disabledの点で。2

    また同じソースでの質問なのですが、以下のようなソースで、1のテキストボックスに過去に入力したもの(プルダウンみたいに下がって出てくる履歴のようなもの)を選択すると、2の方の入力ができなくなります。履歴の数字を入れても2の方に記入できるようにするにはどのようにしたら良いのでしょうか。また、これらの処理を行うとき、onChange以外のものを使ってできるのでしょうか?大変困っております、よろしくお願いします。 <html> <head> <title></title> <script language="JavaScript"> <!-- function setTF(){ if(document.form1.text1.value=="") document.form1.text2.disabled = true; else document.form1.text2.disabled = false; } //--> </script> </head> <body> <form name="form1"> 1<INPUT type="text" name="text1" onChange="setTF()"> 2<INPUT type="text" name="text2" disabled> <INPUT type="submit" value="登録" onClick="return setTF()" name="submit"> </form> </body> </html>

  • ラジオボタンでdisabledとchecked

    お世話になります。 ラジオボタンが3つ有り、それぞれチェックする種類によって 表示内容を変更している処理があります。 今回、そこをカスタマイズすることになり、表示するのは1種類になりました。 環境ファイルの設定で、1種類か3種類かの表示を 変更できるようにしなければなりませんが。 つまり、ラジオボタンが不要になったのですが、 そのラジオボタンを参照している箇所が数箇所あるので それらを削除するのでなく、レイアウトも崩れてしまうので ラジオボタンはそのままで、表示する種類のラジオボタンを checked し、 全部のボタンを disabled しました。 (ラジオボタン横の文字はフォントの色をグレーにしました) 問題なく、動いているのですが このような使い方はOKでしょうか?  こんな感じにしました    ↓ <input type="radio" name="who" value="0" checked disabled><font class="gray">全員</font> <input type="radio" name="who" value="1" disabled><font class="gray">男性</font> <input type="radio" name="who" value="2" disabled><font class="gray">女性</font>  <input type="button" value="表示" name="hyouji" id="hyouji"> よろしくお願いします。

  • jQueryを使用したチェックボックス動作について

    現在、HTML作成におきまして、 チェックボックスのチェックによる、フォームの入力可・不可の設定をしたいと思っており、下記の様なソースをしようしております。 input type="text" において、1つのみであれば、上記の動作は可能ですが、 複数の場合、一つ目のみ有効(入力可・不可)になります。 複数を有効する方法はありますでしょうか。 <現在のソース> ========以下、script========= <script> $(function(){ $("div.ckbtnon input[type=checkbox]").change(function(){ $("div.ckbtnon input").next("input[type=text]").attr("disabled", "disabled").removeClass("bg_white").addClass("bg_disabled"); $(":checked").next("input[type=text]").removeAttr("disabled").removeClass("bg_disabled").addClass("bg_white"); }).trigger("change"); }); </script> ・ ・ ・ ========以下、HTML========= <div class="ckbtnon"> <label> <input type="checkbox" name="check" value="">CHECKTEST <input type="text" name="txt" value=""><!--1--> <input type="text" name="txt" value=""><!--2--> </label> </div> //ここまで HTML内の<input type="text" name="txt" value="">が2つ目の場合、効かない状態になります。 1つ目を含め複数のテキスト入力に可・不可を制御できますでしょうか。

  • Firefoxのdisabledプロパティのバグ?

    複数のラジオボックスがあり、すべてのラジオボタンで 「YES」がチェックされた時にだけ、submitボタンが 有効になるようJavaScriptで制御できればと思ってます。 素人ながら以下のようなJavascriptにしたところ、 IEやSafari、Chromeでは意図した通り動作しましたが、 ただFirefoxのみボタンがdisabledになったまま有効になりませんでした。 解決策がわかる方がいらっしゃればご教授お願いできればと思います。 よろしくお願い致します。 <script type="text/javascript"> <!-- function check() { if (form1.radio1[0].checked && form1.radio2[0].checked && form1.radio3[0].checked) { form1.send.disabled = false; } else { form1.send.disabled = true; } } ; //--> </script> <form name="form1"> <input type="radio" name="radio1" value="1" >YES <input type="radio" name="radio1" value="2">NO <input type="radio" name="radio2" value="1">YES <input type="radio" name="radio2" value="2">NO <input type="radio" name="radio3" value="1" onClick="check()">YES <input type="radio" name="radio3" value="2">NO <input type="button" name="send" value="GO" onclick="location.href='hogehoge.html'" disabled="disabled"> </form>

  • JavaScriptのdisabledがうまく動かない

    以下のソースで、JSの箇所(disabled)だけですと動くのですが、送信フォームを追加すると、エラーになってしまいます。 <HTML> <HEAD> <TITLE></TITLE> <script language=javascript1.2> <!-- function textboxdisable(state){ var len = document.forms["form1"].f_level2.length; for(var i=0;i<len;i++) {document.forms["form1"].f_level2[i].disabled=!state;} } //--> </script> <input type="submit" value="送信"> <FORM action="test.html" method="POST" target="_blank"> <form name=form1> <tr><td align="right"> <input type="checkbox" name="f_level" value="f_level" onclick="textboxdisable(this.checked)">登録レベル</td> <td><input type="radio" name="f_level2" value="main" disabled>主メール <input type="radio" name="f_level2" value="sub" disabled>サブメール</td></tr> </form> </BODY> </HTML> どこが悪いのか、もうかれこれ半日考えています・・ 分かる方いらっしゃいましたら、教えていただけますでしょうか。

  • チェックボックスのON/OFFに連動してラジオボタンのdisabledを解除

    下記の動作をする checkfunc(); の書き方をご教示ください. <html> <head> <script type="text/javascript"> checkfunc() </script> </head> <body> <form name="myform"> <input type="checkbox" name="yesno" value="1">チェックボックス <input type="radio" name="rdo1" value="0">ラジオボタン0 <input type="radio" name="rdo1" value="1">ラジオボタン1 <input type="radio" name="rdo1" value="2">ラジオボタン2 <input type="radio" name="rdo1" value="3">ラジオボタン3 <input type="radio" name="rdo1" value="4">ラジオボタン4 </form> </body> </html> (1) このHTMLのラジオボタン5つは,最初は全てdisabledです. (2) チェックボックスがされたらラジオボタングループが有効になるようにしたいです. (3) 逆に,チェックが外れたらラジオボタンはdisabledに戻ります. (4) このjavascriptは,PHPファイルに組み込みますが.表示時にDBを読み込んでどれに  チェック/選択されていたかによって,checkboxやradioに「checked」を追記します.  その場合,enabled/disablesの関係に矛盾がないようにもしたいですが,  <body>に onload="checkfunc();" と入れればいいでしょうか? なお,IE以外のブラウザでも動作できると大変助かります.よろしくお願い致します.

  • INPUTタグ disabledでテキストの色を通常の黒に

    HTMLのテキストボックスで、コピーは可能で、入力不能の状態にしたい。 (計算式の答えをボタン入力で入れるため) そのため、INPUTタグでdisabledにした。 reasonlyだと、コピーが出来ないため。 ただ、disabledだと、文字が灰色になってしまいます。 それを防ごうと、styleオプションで、文字色をしようとしたがうまくいきません。(colorなどで) 方法を教えてください。 (javascriptしか、無理な場合は、ソースを教えてください)

    • ベストアンサー
    • HTML
  • 一部スクロール表示が含まれる画面を印刷する方法

    ホームページ画面の一部に縦スクロールの設定をしております。 画面上に印刷ボタンを作成し、プリントアウトしたいと考えておりますが、ファイル→印刷と押すと表示された部分のみしか印刷されません。 どなたかご存じでしたらご教示願います。 【HTML】 <div style="top : 161px;left : 8px; position : absolute; z-index : 4; width : 847px; height : 252px; " id="Layer5"> <div style="background: white; padding: 10px; margin-bottom: 10px; border: 1px solid #333333;" class="test"> <table border="1" height="252" width="818"> <tr bgcolor="gray" style="color:white" height="50"> <th height="42" size=10><b>注文日</b></th> <th height="42" width="212">品物・オプション<br>注文先・単価</th> <th height="42" size=10>金額/個数</th> <th height="42" size=20><b>発注者/入力者</b></th> </tr> <% for(var i in content) { %> <tr bgcolor="lightyellow" > <% var obj = content[i]; %> <td align="center" height="47" size="10"> <input type="text" name=注文日 size="10" style="background:white; color:#000000;" align="middle" value="注文日" disabled="disabled"> </td> <td align="center" height="47" width="10" style="white-space:nowrap;" > <input type="text" name=品物 size=4 style="background:white; color:#000000;" align="middle" value="<%= obj.品物 %>" disabled="disabled"> <input type="text" name=option size=1 style="background:white; color:#000000;" align="middle" value="" disabled="disabled"> <input type="text" name=品物2 size=4 style="background:white; color:#000000;" align="middle" value="<%= obj.品物2 %>" disabled="disabled"> <input type="text" name=option2 size=1 style="background:white; color:#000000;" align="middle" value="" disabled="disabled"> <input type="text" name=品物3 size=4 style="background:white; color:#000000;" align="middle" value="<%= obj.品物3 %>" disabled="disabled"> <input type="text" name=option3 size=1 style="background:white; color:#000000;" align="middle" value="" disabled="disabled"><br> <input type="text" name=tyumonsaki size=4 style="background:white; color:#000000;" align="middle" value="<%= obj.order_destination %>" disabled="disabled"> <input type="text" name=単価 size=1 style="background:white; color:#000000; text-align: right;" align="middle" value="<%= obj.単価 %>" disabled="disabled"> <input type="text" name=tyumonsaki2 size=4 style="background:white; color:#000000;" align="middle" value="<%= obj.order_destination2 %>" disabled="disabled"> <input type="text" name=単価2 size=1 style="background:white; color:#000000; text-align: right;" align="middle" value="<%= obj.単価2 %>" disabled="disabled"> <input type="text" name=tyumonsaki3 size=4 style="background:white; color:#000000;" align="middle" value="<%= obj.order_destination3 %>" disabled="disabled"> <input type="text" name=単価3 size=1 style="background:white; color:#000000; text-align: right;" align="middle" value="<%= obj.単価3 %>" disabled="disabled"> </td> <td align="center" height="47" size=10> <input type="text" name=合計金額 size=10 style="background:white; color:#000000; text-align: right;" align="middle" value="<%= obj.合計金額 %>" disabled="disabled"> <input type="text" name=合計数 size=10 style="background:white; color:#000000; text-align: right;" align="middle" value="<%= obj.合計数 %>" disabled="disabled"> </td> <td align="center" height="47" size=20> <input type="text" disabled="disabled" name=発注者 size=20 style="background:white; color:#000000;" align="middle" value="<%= obj.発注者 %>"> <input type="text" disabled="disabled" name=入力者 size=20 style="background:white; color:#000000;" align="middle" value="<%= obj.入力者 %>"> </td> </tr> <% } %> </table> </div> </div> 【CSS】 .test { height: 250px; overflow-y: scroll; }

専門家に質問してみよう