WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:セレクトメニューを使用不可にしても文字色を黒について

0:[投稿] Maki [2006/08/06 09:58 ] [環境:IE5.5以上 Apache]

いつも参考にさせていただいております。

早速質問させていただきます。

下記のコードはセレクトメニューを使用不可にしていることで
選択されている文字が灰色になっておりますが、
使用不可の状態でも文字色を黒色にしたいのですが、
技術的に可能でしょうか?

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

<html>
<head>
<title></title>
</head>
<body>
<form>
<select disabled>
<option value="MZ-80K">MZ-80K
<option value="MZ-80C">MZ-80C
<option value="MZ-80K2">MZ-80K2
</select>
</form>
</body>
</html>


1:[回答] m035 [2006/08/06 11:23 ][URL]

ブラウザに依存しているので無理ではないかと思います。
例えば以下はFireFoxではdisabledでも文字色は青でしたが、IEでは灰色になってしまいました。
<body>
<form>
<select style="color:#000" disabled>
<option value="MZ-80K">MZ-80K
<option value="MZ-80C">MZ-80C
<option value="MZ-80K2">MZ-80K2
</select>
</form>
</body>
そこで、disabledならセレクトボックスは変更できないので、素直にMZ-80Kと直接書くか、以下のようにしてしまえばよさそうです。
<body>
<form>
<select style="color:#000">
<option value="MZ-80K">MZ-80K</option>
</select>
</form>
</body>


2:[回答] m035 [2006/08/06 11:24 ][URL]

訂正:
文字色は青でしたが→<body>文字色は黒でしたが


3:[回答] 燕雀 [2006/08/06 13:39 ]

すでに指摘されているように,CSS でがんばるよりは JavaScript を使ったほうが手っ取り早いと思います.
例えば,

function selectDisabale(thisobj) {
 thisobj.blur();
 document.getElementsByTagName("body")[0].focus();
 }

<select onFocus="selectDisabale(this);">
<option value="MZ-80K">MZ-80K</option>
<option value="MZ-80C">MZ-80C</option>
<option value="MZ-80K2">MZ-80K2</option>
</select>

みたな感じでしょうか?
もし私が作るなら,こんな感じから作りこんでいくかな〜

function selChange(inobj) {
 var dispobj= document.getElementById("sel1display");
 dispobj.style.width= inobj.scrollWidth+"px";
 inobj.style.display="none";
    dispobj.value= inobj.value;
    dispobj.style.display="";
 }

<select id="sel1" onChange="selChange(this)">
<option value="MZ-80K">MZ-80K</option>
<option value="MZ-80C" style="color:red;">MZ-80C</option>
<option value="MZ-80K2">MZ-80K2</option>
</select>
<input id="sel1display" readonly style="display:none;">

回答(必須): 状態:

お名前(必須):

URL:




[戻る]