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

締切済

質問者：絶壁氏
質問日時：2017/11/12 02:50
回答数：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
通報する

通報する

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

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： naokita
回答日時：2017/11/18 23:50

tabindex="-1" を利用する

- 0
- 件

通報する

No.2

回答者： fujillin
回答日時：2017/11/15 09:42

#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のリスト構造の方が適切なのかも知れませんね。

- 0
- 件

通報する

参考程度に

No.1

回答者： fujillin
回答日時：2017/11/14 17:14

こんにちは

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

＞答えの欄は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>