HTMLのスタイルシートでFormの文字色が変えれる事はわかっています。
style="background:red;color:white;"
でいいんですよね。
そこで、CSSで条件によってボタンの文字色を変えたいのですが、どうすればいいでしょうか?

なぜ、こんな事を考えるようになったかというと、
IE等では、ボタンのEnableがTrueの時は黒色(バックは普通)、Falseの時は灰色(バックは薄い)状態になるのですが、
この前、chromeでそのボタンを確認したところ、TrueでもFalseでも文字色が黒になっていました。
そこで、ボタンのEnableがFalseの時に、文字色を灰色に変えたいのですが、そんな事ってCSSを使ってでも出来るのでしょうか?

もし出来ないとしたら、ボタンひとつずつスタイルを設定しないといけないという面倒な事になりそうなのです。

もし、CSSでボタンがEnable=falseの時だけ、ボタン色を灰色にする方法がわかる方がいらっしゃいましたら、回答してください。

急ぎませんので、回答よろしくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (3件)

??


 javascriptか何かで、Enable=falseを指定しているなら、その時点でスタイルシートを書き出すしかない??

 button要素にはenableという属性値はないので・・

 form要素内の要素なら
 button、input、optgroup、option、select、textareaについて、disabled属性があります。
<form action="[URL]" method="[post|get]">
 <button disabled type = "submit" title="送信">
</form>
でしたら、属性セレクタを使って
 button[disable]{background:red;color:rgb(120,120,120);}
    • good
    • 0
この回答へのお礼

すみません、disabledでしたね。

つい、Enable=falseって表現を使っていました。
<button>ではなく、<input type="submit">を使っています。

input[disabled]{color:#BBBBBB;}
で試してみたところうまく動作しました。

ありがとうございます。

お礼日時:2011/04/26 17:14

behaviorか


Javascriptで
disabledかどうかを判定して
.style.color=
で変えればOKだったはず。
chromeでこれができたかどうかは
chromeを入れていないのでわからないけど。
    • good
    • 0
この回答へのお礼

Javascriptを使うとしたら、各ページに設定しないといけないですよね?
そうすると、CSSのようにまとめて変換できないので、各ボタンに色変えをしても一緒ですね。

ということで、あきらめて、全部のEnable=falseのボタンにStyle="color:#BBBBBB;"を入れることにします……

IEでは、色を変えたところで無視されるので問題なくて、chrome対策なんですけどね……
色が変わらないchromeは嫌いだぁ~

お礼日時:2011/04/25 16:39

IEでは、


Enable=false
時のボタンの色をいじることはできません。

行うとしたら
ボタンのように見える画像や
スタイルシートを駆使してボタンのように見えるテキストにするしかありません。
    • good
    • 0
この回答へのお礼

IEでは、普通に灰色に変わっているので、色が変わらなくても問題ありません。
chromeの時に、色を変えたいのですが、Enable=falseの時だけ色を変える方法って無いでしょうか?

お礼日時:2011/04/25 12:20

このQ&Aに関連する人気のQ&A

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

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

このQ&Aを見た人が検索しているワード

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

QHTMLボタンの文字色を変えられますか

よろしくお願いします。

HTMLで作成したボタンの文字の色は
デフォルトで黒ですが、これを白ぬきしたいと思って
います。実現可能でしょうか?

Aベストアンサー

formで作ったボタン(butoon,submit,reset等)だと仮定してお答えしますが、
スタイルシートを使えばできます。
ついでにボタンの色自体も変えたいとして書いておきますね。

<input TYPE="button" VALUE="button">
<input TYPE="submit" VALUE="submit">
<input TYPE="reset" VALUE="reset">

だと普通のボタンになりますが、
style="background:red;color:white;"
というのをinputタグの中に書けばボタンの色と文字の色が変わります。
今の例では、ボタンそのものは赤色になり、
文字の色は白色になります。
色を変えたい場合は、red、whiteの部分を好きなように変えてください。
文字色だけならbackground:red;はなくしてください。
実際には、以下の様に書いてください。

<input TYPE="button" VALUE="button" style="background:red;color:white;">
<input TYPE="submit" VALUE="submit" style="background:red;color:white;" >
<input TYPE="reset" VALUE="reset" style="background:red;color:white;" >

もしスタイルシートがわからない、同じようにやったけど変わらないというなら補足してください。

formで作ったボタン(butoon,submit,reset等)だと仮定してお答えしますが、
スタイルシートを使えばできます。
ついでにボタンの色自体も変えたいとして書いておきますね。

<input TYPE="button" VALUE="button">
<input TYPE="submit" VALUE="submit">
<input TYPE="reset" VALUE="reset">

だと普通のボタンになりますが、
style="background:red;color:white;"
というのをinputタグの中に書けばボタンの色と文字の色が変わります。
今の例では、ボタンそのものは赤色になり、
文字の色は白色にな...続きを読む

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

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 --

QHTMLで条件分岐はできますか?

HTML初心者です。今、HPを作成しています。

トップページでその日の日付(出来れば時間も)を表示させたいと思って色々調べています。

JavaScriptを使って、文字列として表示させるやり方は分かったのですが、見た目的にあまり可愛くないなぁと思って、質問させていただきました。

0~9の画像を用意して、それぞれ当てはめれたらいいなぁと思っています。

JavaScriptで取得した日付の数字を元に、表示させる画像を変えようと思うのですが、HTMLでそういった条件分岐をすることは出来るのでしょうか?

Aベストアンサー

HTMLだけでは不可能です。
ですが、
> 0~9の画像を用意して、それぞれ当てはめれたらいいなぁと思っています。
ということならJavaScriptやCGIを使用すれば可能です。

JavaScriptでやる場合

image1 = document.getElementById("image1");
image1.src ="画像名.gif";
<img id="image1">

という感じでJavaScriptで表示する画像を変更できます。

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

Qhtml で 変数を定義できますか?

html(できればjava不使用)で変数に文字列をいれてつかう、またはそれに近いことはできないでしょうか?

例**************************
$color1="#000000"

<tr bgcolor=$color1>内容1<tr>
<tr bgcolor=$color1>内容2<tr>
****************************
みたいな感じです

Aベストアンサー

調べりゃ分かることは???だけど。

CSS2で無理やり作れば・・簡単だけど・・・
生成内容、自動番号振り、リスト ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/generate.html )
 本来はXSLTで作るほうがよいかと・・・
 <th><xsl:value-of select="parson" />の歌</th>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>サンプル</title>
<meta name="author" content="ORUKA1951">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rev="made" href="mailto:orika1951@hoge.com" title="send a mail" >
<link rel="START" href="../index.html">
<style type="text/css">
<!--
.parson1:before{content:"田中";}
p.age1:after{content:"36歳";}
-->
</style>
</head>
<body>
<h1>サンプル</h1>
<p class="parson1">は男の子</p>
<p class="parson1 age1">の年齢は</p>
<p>私の彼氏は<span class="parson1">君だよ</p>
</body>
</html>

調べりゃ分かることは???だけど。

CSS2で無理やり作れば・・簡単だけど・・・
生成内容、自動番号振り、リスト ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/generate.html )
 本来はXSLTで作るほうがよいかと・・・
 <th><xsl:value-of select="parson" />の歌</th>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>サンプル</title>
<met...続きを読む

Q文字列で条件分岐

「 %stock% 」というパラメータから吐き出される決まった文字列("即納"や"待ち")によってスタイルシートの背景色を自動的に変更したいと思っています。

"即納" の場合、background-color: #red;
"待ち" の場合、background-color: #green;

「 %stock% 」というパラメータを用いて表示させているので、
バックエンドで指定した文字列に対応して変化させたいと思っています。

すみませんがご教授ください。
よろしくお願いします。

Aベストアンサー

個人的には<span class="stockArea">%stock%</span>の記述がとても気になるのですが・・・。
JSPやASPのようなサーバサイドで動的にHTMLを出力していませんか?

> span タグの中に class を追加した場合の記述は、どの様になりますでしょうか?

classを使用されるとJavaScriptのDOM関数では要素を取得できない(一応できますが、処理が煩雑になります)ため、私はjQueryなどのJavaScriptライブラリを使用することをオススメします。

jQueryを使用した場合は下記のように記述することで機能が実現できます。

// class="stockArea"の要素を全て取得
var stockAreas = $.find("span.stockArea");

// 上記で取得した各要素に対して
$.each(stockAreas, function(i, stockArea) {

// テキスト値が「即納」の場合
if ($(stockArea).text() == "即納") {
$(stockArea).css("backgroundColor", "red");
}

// テキスト値が「待ち」の場合
else if ($(stockArea).text() == "待ち") {
$(stockArea).css("backgroundColor", "green");
}
});

個人的には<span class="stockArea">%stock%</span>の記述がとても気になるのですが・・・。
JSPやASPのようなサーバサイドで動的にHTMLを出力していませんか?

> span タグの中に class を追加した場合の記述は、どの様になりますでしょうか?

classを使用されるとJavaScriptのDOM関数では要素を取得できない(一応できますが、処理が煩雑になります)ため、私はjQueryなどのJavaScriptライブラリを使用することをオススメします。

jQueryを使用した場合は下記のように記述することで機能が実現できます...続きを読む

Q特定内の
の色を変える

お世話になります。
特定<table>内の<td>の色を変える
<table id="abc">
<tr>
<td>あああああ</td>
<td>いいい</td>
<td>ううう</td>
</tr>
</table>
<table>にはidを定義します。
その<td>タグにはidを定義していません。
このとき、あああああ、いいい、うううの表示色を
<input type="button" value="色を変える" onClick="ChngColor()">

なんてことで、
マウスをクリックすることにより変更できないものでしょうか。
よろしくお願いいたします。

Aベストアンサー

#1さんへの補足より――

> functio ChngColor(){
> var Obj=document.getElementById('abc');
> Obj=document.getElementsByTagName("td");
> for (var i=0;i<Obj.length;i++){
> Obj.style.color="red";
> }
> }

特に3行目がいけない。こう変えましょう。
(あと、詰めすぎは見づらいので、適当に空白を入れました)

function ChngColor() {
var Obj1 = document.getElementById('abc');
var Obj2 = Obj1.getElementsByTagName("td");
for (var i = 0; i < Obj2.length; i++) {
Obj2[i].style.color = "red";
}
}

QonClickで関数呼出し後に、結果に応じてsubmitを実行する方法

JavaScriptで、
function func() {
 if (a==0) {
  alert("処理しない");
  return false;
 }
 return true;
}
と、a=0ならfalseを返し、それ以外ならtrueを返す関数を定義しています。

そして、FORMタグで
<FORM NAME="FormName" ACTION="next.html">
<INPUT TYPE="button" VALUE="next" NAME="button1" onClick="return func();submit();">
</FORM>
と記述しています。
要は、ボタンを押下した際にfunc関数がtrueを返せば、next.htmlに
遷移させたいのですが、上記記述では、遷移しません・・・
onClick部分にonClick="return func(),submit();"と記述した場合、
func関数の実行結果がtrueでもfalseでも遷移してしまいます。
そこで、なんとなくonClick="return func()&&submit();"と記述してみたところ、
func関数がtrueの時のみうまく遷移するようになりました。

これは偶然そう動作しているのでしょうか、それとも上記は正しい記述方法なのでしょうか?
正しい記述方法ならいいのですが、上記以外に正式な記述方法があれば
教えていただけないでしょうか?

※TYPE="submit"にすればいいとは思うのですが、buttonで実現したいと
考えております。

JavaScriptで、
function func() {
 if (a==0) {
  alert("処理しない");
  return false;
 }
 return true;
}
と、a=0ならfalseを返し、それ以外ならtrueを返す関数を定義しています。

そして、FORMタグで
<FORM NAME="FormName" ACTION="next.html">
<INPUT TYPE="button" VALUE="next" NAME="button1" onClick="return func();submit();">
</FORM>
と記述しています。
要は、ボタンを押下した際にfunc関数がtrueを返せば、next.htmlに
遷移させたいのですが、上記記述では、遷移しませ...続きを読む

Aベストアンサー

3つのパターンをみる限り、理由は以下の通りと思います。
1.セミコロン(;)で区切った場合、
この場合、「return func();」と「submit();」とは別の文です。returnはその時点の値を戻して、それ以降の動作を打ち切ってしまいます。よって、onClickイベントはfuncメソッドの戻り値(true/false関係なく)を戻して、そこで終了、それ以降のsubmitは実行しないとなります。

2.カンマ(,)で区切った場合、
この場合、「return func(),submit();」が1つの文となります。この「,」は、左右の式を評価して、右式を結果とする演算子です。よって、funcメソッド、submitメソッド両方を評価するため、funcメソッドの戻り値に関係なく、submitされます。

3.&&で区切った場合、
論理演算子「&&」は、左右ともにtrue(0以外)の場合のみtrueとする演算子です。また、2項論理演算子は左式から評価し、左式だけで全体の結果がわかる場合、右式を評価しません。よって、funcメソッドがfalseを戻した場合、その時点でsubmitを評価しなくても演算結果は必ずfalseとなるのでそこで打ち切られ、trueを戻した場合、submitを評価しないと演算結果を得られないため、遷移したわけです。「&&」を「||(論理和)」に変更すると逆の結果得たと思います。

さて、では3の「&&」が正しいかと言われたら、文法上は正しいです。ただし、他人がみてわかるとは思えません。
そこで、以下の記述はいかがでしょう。読んでみてソースを理解できますか。


<FORM NAME="FormName" ACTION="next.html">
<INPUT TYPE="button" VALUE="next" NAME="button1" onClick="func()">
</FORM>

(中略)

// funcの定義
function func() {
 if (a==0) {
  alert("処理しない");
  return ;
 }
 document.FormName.submit();
}

要は、ボタンを押されたら、funcを呼び出せ。
funcでは、aが0ならば、そこで終了しろ。
そうでなければ、documentオブジェクト内のFormNameと言う名前のオブジェクトのsubmitメソッドを呼べ。
です。

3つのパターンをみる限り、理由は以下の通りと思います。
1.セミコロン(;)で区切った場合、
この場合、「return func();」と「submit();」とは別の文です。returnはその時点の値を戻して、それ以降の動作を打ち切ってしまいます。よって、onClickイベントはfuncメソッドの戻り値(true/false関係なく)を戻して、そこで終了、それ以降のsubmitは実行しないとなります。

2.カンマ(,)で区切った場合、
この場合、「return func(),submit();」が1つの文となります。この「,」は、左右の式を評価して、右...続きを読む

Q指定の文字だけ色を変える

指定の文字だけ色を変えるということは
できるのでしょうか。。。
できたらタグを教えて欲しいです。

Aベストアンサー

特定の文字だけ、色を変えるようなHTMLはありませんし、スタイルシートでの指定もちょっとわからないので、かなり雑然としたソースになりますが、その文字ごとに文字色指定を付けていく方法しか、私には思いつきません。
既に出ているように、<font>要素での色指定や、<span>要素で囲ってスタイルシートを適用してやるような方法が、力技ですが一番手っ取り早いかと思います。

上記の方法でしたら、テキストエディタなどには、文字列の検索・置換機能のついたものもありますから、それを利用するのも手ですし、それが無ければJavaScriptを使った置換動作で変換する方法も使えるのではないかと思います。
JavaScriptがいじれるのでしたら、下にソースをつけますので、以下のソースをコピペしてブラウザで表示し、試してみて下さい。

<html>
<head>
<!--
txcl="#ff0000";//変更させたい色指定
stag="<span style='color:"+txcl+"\;'>";// 挿入する開始タグ
ttag="</"+"span>";//挿入する終止タグ

function repl(){
txt=document.f1.box1.value;
ccwds=document.f1.box2.value;
regcc= new RegExp(ccwds,"g");
txt=txt.replace(regcc,stag+ccwds+ttag);
cleanup= new RegExp(ttag+stag,"g");
txt=txt.replace(cleanup,"");
document.f1.box3.value=txt;
document.getElementById("test").innerHTML=txt;
}
//-->
</script>
</head>
<body>

<form name="f1" action="#">
<p>1.元の文章<br>
<textarea name="box1" rows="10" cols="80"></ textarea>
<br>
変色させたい文字列:<input type="text" name="box2">
<input type="button" value="変換" onClick="repl()">
<input type="reset">
</p>
<hr>
<p>2.処理後のHTMLソース<br>
<textarea name="box3" rows="10" cols="80" readonly="readonly"></ textarea>
</p>
</form>

<div id="test"></div>

</body>
<html>

なお、上記ソースでは、textareaの終止タグに、敢えて半角スペースを入れています。 コピペ時には、修正してください。
参考になれば幸いです。

特定の文字だけ、色を変えるようなHTMLはありませんし、スタイルシートでの指定もちょっとわからないので、かなり雑然としたソースになりますが、その文字ごとに文字色指定を付けていく方法しか、私には思いつきません。
既に出ているように、<font>要素での色指定や、<span>要素で囲ってスタイルシートを適用してやるような方法が、力技ですが一番手っ取り早いかと思います。

上記の方法でしたら、テキストエディタなどには、文字列の検索・置換機能のついたものもありますから、それを利用するのも手ですし...続きを読む


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

人気Q&Aランキング

おすすめ情報