在宅ワークのリアルをベテランとビギナーにインタビュー>>

INPUTタグ disabledの文字色を変えたいのですが

締切済

  • 質問者：絶壁氏
  • 質問日時：
  • 回答数：3件

同じような質問を読み返してみるとブラウザ依存でいじることが出来ないということはわかりましたが、自分のやりたいことを別の方法で出来ないかご教授お願いします。

テキストボックスはTABキーを使って入力していきたいです。

Ex)□　+　□　＝　■　//これがいくつもあると思って下さい
１+１＝２とするのに
□には手入力で１を入れて、■には黒色の２を表示させたい。
□と■は同じテキストボックスで、■には入力不可を意味するためにstyleを指定してあります。
readonlyだと選択が出来てしまうので、答えの欄はTABを押したときに通り過ぎてほしいのです。

<INPUT TYPE="text" NAME="ch" SIZE="1" disabled="disabled" style="border-width:0px; border-style:None;">

このタグをjavascript、もしくはCSS、htmlで選択不可、入力不可、黒色表示にするやり方を教えてください。

質問者からの補足コメント

  • 回答ありがとうございます。
    htmlをHTAにして動かしています。
    確かにdisabledでは選択不可ですが、disabledの場合ブラウザ依存により文字色が勝手にグレーになります。（同じような方多数いらっしゃいます）

    disabledでは選択不可、文字色グレー
    readonryでは選択可、反映はされないが入力可、文字色黒
    ということです。

    つまり私がやりたいのはdisabledを使わずに選択不可にする方法です。

    No.1の回答に寄せられた補足コメントです。 補足日時：2017/11/15 07:02
    通報する
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3

  • 回答者： naokita
  • 回答日時：

tabindex="-1" を利用する



<input type="text" name="ch" size="1" value="" readonly="readonly" tabindex="-1" />
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： fujillin
  • 回答日時：

#1です。



＞disabledの場合ブラウザ依存により文字色が勝手にグレーになります
disabledのデフォルトの文字色は確かにグレーですが、CSSで指定することで変えられます。
#1の例をhtmlで表示してみればわかるはずです。
（勝手な解釈で、濃いグレー背景に白文字表示にしてありますけれど…）

＞htmlをHTAにして動かしています
HTAにすると#1のままではCSSが効かなくなるようです。
head内に以下の一行を追加することで、表示されるようになると思います。
　<meta http-equiv="x-ua-compatible" content="ie=9">
当方の勘違い（？）で、上述のように「グレー背景に白文字」にしてありますが、表示できることが確認できたなら、お好きなように変更してくださればよろしいと思います。

＞disabledを使わずに選択不可にする方法です。
javascriptを用いればそのような制御は可能ですが、ブラウザでできることをわざわざスクリプトでやる必要もないのではないでしょうか？
（どうしても、その方法にこだわるのであれば、考えてみますけれど・・・）


※ 全体像がわからなかったので、方法の例として単純な段落の文書構造にしてしまいましたが、ul-liのリスト構造の方が適切なのかも知れませんね。
    • good
    • 0
    • 件
通報する

参考程度に

No.1

  • 回答者： fujillin
  • 回答日時：

こんにちは



ブラウザ表示が対象ということで良いのですよね？

＞答えの欄はTABを押したときに通り過ぎてほしいのです。
通常であれば、disabled="disabled"に設定してあるinput要素はTabキーの選択では飛ばされるはずですけれど、そうならないということでしょうか？

＞htmlで選択不可、入力不可、黒色表示にするやり方を～
意味がはっきりと把握できませんが、disabled="disabled"の設定で、選択不可、入力不可になっていませんか？

＞disabledの文字色を変えたいのですが
＞黒色表示
「文字の色」とはっきり書いてはあるのですが、意味しているのは文字の色のことなのでしょうか？
というのも、通常デフォルトで文字色は黒になっているものと思いますので・・・
ひょっとすると、ご質問文の表示にあるように
　□ + □ ＝ ■
のような表示にしたいということではないかと推測してみました。
その場合は、背景色を黒やグレー等に設定することでそのような感じの表示になると思います。

ご質問の内容を把握できていませんし、答え（？）の欄の表示はどのようにするのだろうなどの疑問も残りますが、勝手な推測でこんな感じのことでしょうか？

※ 見当はずれの場合は無視してください。


<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<style type="text/css">
p { margin:0 0 5px 0; }
input {
display: inline-block; width:1em; line-height:1em;
border: 1px solid #AAA; text-align: center;
}

input:first-child + span::before { content: " ＋"; }
input:nth-child(3) + span::before { content: " ＝"; }
input:disabled { background-color: #666; color: white; }
</style>
</head>
<body>
<p>
<input type="text" name="i11" /><span></span>
<input type="text" name="i12" /><span></span>
<input type="text" name="i13" disabled />
</p>
<p>
<input type="text" name="i21" /><span></span>
<input type="text" name="i22" /><span></span>
<input type="text" name="i23" disabled />
</p>
<p>
<input type="text" name="i31" /><span></span>
<input type="text" name="i32" /><span></span>
<input type="text" name="i33" disabled />
</p>
<p>
<input type="text" name="i41" /><span></span>
<input type="text" name="i42" /><span></span>
<input type="text" name="i43" disabled />
</p>
</body>
</html>
この回答への補足あり
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

関連するQ&A

関連するカテゴリからQ&Aを探す

このQ&Aと関連する良く見られている質問

Qdisable時の背景色（HTML）

チェックボックスをdisabledで非活性にしたときの背景色の設定はできないのでしょうか？

また、チェックボックスをリードオンリーにすることはできますか？
WEBではできると書いてありますが、実際に試してみるとうまくいきません。

要はチェックボックスが変更不能でかつ見えやすくしたいのです。

何か方法があれば教えてください。

Aベストアンサー

CSS3のセレクタであるdisabledで、disabled時のスタイルを指定できます。

E:disabled
{
background:#fff;
}

ただし、対応しているブラウザが少ない（Firefox1.5〈Gecko1.8〉以上で対応。IE7β2及びOpera8.54は非対応）ので、まだ一般に使用できる段階にはないといえます。

なお、チェックボックスをreadonlyにすることは出来ないかと。
＞readonly (readonly) #IMPLIED -- for text and passwd --

他の回答も見る

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

HTMLのテキストボックスで、コピーは可能で、入力不能の状態にしたい。
（計算式の答えをボタン入力で入れるため）

そのため、INPUTタグでdisabledにした。
reasonlyだと、コピーが出来ないため。

ただ、disabledだと、文字が灰色になってしまいます。

それを防ごうと、styleオプションで、文字色をしようとしたがうまくいきません。（colorなどで）

方法を教えてください。
（javascriptしか、無理な場合は、ソースを教えてください）

Aベストアンサー

ご質問の意味が今ひとつよく理解できていないので的をはずしてそうですが、入力できないようにしたフィールドに動的に値を入力したいということであれば、次のようにJavaScriptを書けば可能です。

<html>
<head><title>...</title></head>
<body>
<input type=text readonly id="result" value="">
<script style="text/javascript">
var num = 1+2+3+4+5+6; //何か計算
document.getElementById("result").value = num;
</script>
</body>
</html>

readonlyなら、テキスト入力フィールドからクリップボードへのコピーは可能です。それとも何か違う意味でコピーという言葉を使ってらっしゃいますか?

他の回答も見る

QＣＳＳでreadonlyの機能はありますか？

ＡＳＰにてＣＳＳを使用しています。
inputタグを読取専用（readonly）にしたいのですが、
スタイルシートでの指定の仕方がわかりません。
よろしくお願いします。

Aベストアンサー

> スタイルシートでも「IME-mode」の設定等、入力に関する制御も可能でしたので

それは某ブラウザが勝手に CSS を拡張して付けた機能で、本来の CSS ではそのようなことはできません。
CSS はあくまでも見た目つまりスタイルをデザインするためのものだと考えるべきです。

他の回答も見る

Qconfirm の　OK、キャンセル　以外の文字を

javascript の　confirm 　で、OK、キャンセル以外の文字を出す方法を探しています。

「出せません」とか、「showModalDialog を使用し自作のダイアログ」とかしか見つかりません。

JavaScript だけで、出来ないものなのでしょうか？

Aベストアンサー

ｊQueryUIのDialogでできます。

以下のサイトの下の方に例が載っていて、そのうちDialog3の例で
OK、キャンセル以外の文字を設定しています。
http://stacktrace.jp/jquery/ui/widgets/dialog.html

Javascriptだけで実現していますが、confirmを使っていないので
質問の意図からはずれてるかもしれませんが。

他の回答も見る

Q複数のボタンを等間隔に、かつ中央に配置する

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか？
↓下記のようなイメージにしたいです。

--------------------
--------------------
　　　　□　□　□　　←これがボタンです


↓htmlファイルです↓
<div class="button">
<input type="submit" value="＜＜ 戻る ＜＜" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button">
<input type="submit" value="＞＞ 進 む＞＞" />
</div>

↓CSSファイルです↓
div.button {
padding-right:35px;
float:left;
}

上記設定で、ボタンの左右間隔はいい感じにあいたのですが
全体的に左に寄ってしまってます。

よろしくお願いいたします。

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか？
↓下記のようなイメージにしたいです。

--------------------
--------------------
　　　　□　□　□　　←これがボタンです


↓htmlファイルです↓
<div class="button">
<input type="submit" value="＜＜ 戻る ＜＜" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button...続きを読む

Aベストアンサー

<div class="button">
<input type="submit" value="＜＜ 戻る ＜＜" />
<input type="submit" value="選択リセット" />
<input type="submit" value="＞＞ 進 む＞＞" />
</div>

div.button {
text-align:center;
}
div.button input {
margin: 0px 20px;
}

他の回答も見る

Qdiv要素内の全input要素をdisable

Javascriｐｔで、あるdiv要素内のチェックボックスやテキストフィールドなどのinput要素を
すべてdisableにしたいです。
以下でうまくいきません。どなたかお知恵を頂けないでしょうか？
よろしくお願い致します。
var input_tags = document.getElementById("div_id").getElementsByTagName("input");

for(var input_tag in input_tags)
{
input_tag.disabled = true;
}

Aベストアンサー

var input_tags = document.getElementById("div_id").getElementsByTagName("input");

for(var i=0;i<input_tags.length;i++){
input_tags[i].disabled = true;
}

他の回答も見る

Q別ファイルのfunctionの読み込み方

こんにちは
外部ファイル hello.js
-----------------------------
function aisatsu(){
var aa="hello"
}
-----------------------------
というファイルが存在した時にjikkou.htmlでaaの値、”hello”を呼び込みたい場合はどう記述すればよいのでしょうか？htmlのなかでaisatsu()をどこに記述していいのか分かりません。どうか教えてください。ただ、hello.jsのほうは実際の記述を簡略化したものであるのでそちらのほうはいじれません。

宜しくお願いします。

必要ないかもしれませんが、念のために私が最初に書いたhtmlの文です（もちろん実行できませんでした）
------------------------------------
<html>
<script language="javascript" src="hello.js">
aisatsu(){
document.write(aa);
}
</script></html>
------------------------------------

こんにちは
外部ファイル hello.js
-----------------------------
function aisatsu(){
var aa="hello"
}
-----------------------------
というファイルが存在した時にjikkou.htmlでaaの値、”hello”を呼び込みたい場合はどう記述すればよいのでしょうか？htmlのなかでaisatsu()をどこに記述していいのか分かりません。どうか教えてください。ただ、hello.jsのほうは実際の記述を簡略化したものであるのでそちらのほうはいじれません。

宜しくお願いします。

必要ないかもしれませんが、念のために...続きを読む

Aベストアンサー

function内で「var」をつけて変数を宣言するとfunction外からその変数の内容を取得することができなくなります。（returnで参照することはできます。）
なので変数の内容を取得する場合は「hello.js」の内容を

function aisatsu(){
var aa="hello";
return aa;
}

このように修正し、

<script language="javascript" src="hello.js"></script>
<script language="javascript">
var data=aisatsu();//「aisatsu()」関数の「aa」変数内のデータを引っ張り出す（return aa;）
document.write(data);//書いたり
alert(data);//アラートしたり
window.status=data;//ステータスバーに表示したり・・
</script>

他の回答も見る

Q

教えていただけますか？
<input type="text" readonly/>を表示したときに表示される枠を
消すことができますか？
何故？と聞かれたら困りますが。。。
よろしくお願いします。

Aベストアンサー

inputにstyle=border:none;を付けると枠線消えましたよ
（Firefox、IE7では確認出来ました）

他の回答も見る

Qで配列（複数の要素）を渡したいとき？

こんにちわ，

今HTML＋PHPで
$hoge[]にいくつかの要素が入っているとき，
それをあるfoo.phpというページに渡したいとき，
echo '<form action="foo.php" method="POST">';
echo '<input type="hidden" name="$hoge[]" >';
echo '</form>';
としたのですが，うまくいきません。

どうしたらよろしいでしょうか。

Aベストアンサー

nameじゃなく、valueでは？
あとやるなら、
for($i=0;$i<count($hoge);$i++){
print "<input type=\"hidden\" name=\"$hoge[$i][0]\" value=\"$hoge[$i][1]\">";
}
とか？

他の回答も見る

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

現在作成しているHTMLに
入力不可のテキストを
作りたいと考えています。
下記の様にDISABLEDを使おうと思っているのですが
そうするとフォントがグレーになります。
フォントの色を黒にする事は可能でしょうか？
ご存知でしたらご教示ください。
よろしくお願いします。

<INPUT TYPE="TEXT" VALUE="AA" DISABLED />

ブラウザ　IE6
OS　WindowsXP

Aベストアンサー

readonly ではダメでしょうか。。

<INPUT TYPE="TEXT" VALUE="AA" readonly />

【type=textの属性】 として指定できるようです。

参考URL：http://www.tohoho-web.com/html/input.htm

他の回答も見る
ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

おすすめ情報