リストボックス(multipleなselect)の選択された部分の色をCSSで変えたいと思っているのですが、記述方法がわかりません。

デフォルトですと選択された部分はネイビーのバックに白文字になるのですが、これを色を変えたり、ボールドをかけたりしたいのです。

「:selected」みたいな疑似要素があるのかと思ったのですが、どうやらないようですね・・・。
「::selection」というCSS3から使える疑似要素があるようですが、これはページ上のテキストを選択した場合のもののようで、リストボックスの選択項目には影響ありませんでした。

ご存知の方ご教示ください。

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

A 回答 (3件)

選択した時にスタイルを適用するのなら


option:checked { font-weight: bold }
でしょうか。Firefox 3.0.10 で確認しています。
    • good
    • 1
この回答へのお礼

再びありがとうございます。

教えていただいた方法で出来ました!

が、また別な問題が・・・。
font-weght、font-size等は機能するのですが、color、backgroundは機能せず同設定してもデフォルトのままです。

もしこれもご存知でしたらご教示ください。
よろしくお願いいたします。

お礼日時:2009/05/28 20:53

CSSのみでは、ちょっと無理かもしれません。


Ajaxを使用すれば出来るみたいです。

http://jquerylab.com/jcombox/themes
    • good
    • 0
この回答へのお礼

回答ありがとうございます。

Ajaxというかjqueryのプラグインでそういうのがあるようですね。
スタイルを変えるためだけに大げさな気もしますが、他に方法が無ければこれで行こうかと思います。

お礼日時:2009/05/28 19:07

option[selected="selected"] { font-weight: bold }


または
option[selected] { font-weight: bold }
    • good
    • 0
この回答へのお礼

回答ありがとうございます。
やってみましたができませんでした・・・。
warezさんはこれでできたのでしょうか?

お礼日時:2009/05/28 19:05

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

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

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

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

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

Q車の色の名前の一覧を探してます!

自動車の色の名前は、ウイニングブルーメタリック、カナリーイエローマイカなど独特なカタカナ名が多いですが、このような名前が一覧になっているようなHPを探しています。ありましたらどなたか教えてください。

Aベストアンサー

ここで探して下さい。

参考URL:http://www.soft99.co.jp/

Q<select size='7' multiple>の選択された箇所の色を変えたい

<select size='7' multiple>の選択された箇所の色を変えたいのですが、
良い方法は無いでしょうか?
スタイルシート等で該当の設定が無いか調べましたが見つかりませんでした。

通常、IEだとブルーの色になりますが、デザインを自由に変えられる
コンテンツのため、ユーザーがselectの背景色を同じような色に設定
する場合があり、現状どれが選択されているのか、非常に見づらくな
るという問題が発生しています。

アドバイス等いただけませんでしょうか?
よろしくお願いします。

Aベストアンサー

JavaScript で解決しましょう。
関数を自作し、onClick イベントで呼出すのです。
関数内では、option 分ループさせて、selected を見て背景色を変えてやればOKです。

Qファイル一覧の項目の色について

ディスクを開くとフォルダゃファイルの一覧が表示されますが、この一覧の各項目名というか表題というか、この表示される名前に色はつけられないものなのでしょうか、色分けできればわかりやすいので、教えていただきたいのですが。

Aベストアンサー

explorerだけではできそうにない。
いろいろなツールがフリーソフトである。


たとえば、
http://homepage3.nifty.com/pyxis/

QCSSの角丸での質問です。 今、CSSを勉強中なんですが、CSSを角丸にした時、角丸にした部分

CSSの角丸での質問です。



今、CSSを勉強中なんですが、CSSを角丸にした時、角丸にした部分の背景色が白色になっているのですが、透明にすることは可能なんでしょうか?
調べたのですが、なかなか見つけられず…
よろしくお願いします。

Aベストアンサー

border-radius: を使ってると思うケド、角丸にした部分の背景は透明。
元々のbodyの背景が白じゃ無いですか?
又は、角丸を使ってる要素の親要素の背景が白。

Q「名前をつけて保存」のデフォルト表示形式を「一覧」以外に変えられますか?

MS-Office以外のアプリケーションで「名前をつけて保存」を選択した際の、
ダイアログウィンドウ内の表示形式を変えられますか?

「詳細」「一覧」「アイコン表示」「並べて表示」「縮小版」
などの選択肢を一定のものに変えたいのです。
(現状では、毎回「名前をつけて保存」を開くたびに「一覧」表示に戻ってしまうようです)

OSはWindows-XPです。

Aベストアンサー

Windows標準の機能(フォルダオプションなど)では出来ませんが
http://okazaki.incoming.jp/matatabi/
のFasieと言うフリーSOFTを使えば出来ます。

http://okazaki.incoming.jp/danpei2/software/fasie.htm
http://pasokoma.jp/39/lg390467#390654

QCSS スタイルを子要素の子要素に継承させたくない

スタイルシートについてまだ初心者なため質問させてください。

以下のようにテーブルのボーダーのスタイルを子要素(<table><td>)にスタイルを継承(?)させているのですが、この方法だと子要素の子要素(<table><td><table><td>)に対しても継承されてしまいます。

table.border { border-style:solid; border-width: 1px 1px 1px 1px; border-collapse: collapse; }
table.border td { border-style:solid; border-width: 1px 1px 1px 1px; }

table.border > td {…} という指定の方法もあるようですが、こちらは対応しているブラウザが乏しいようで事実上使用できません。

子要素の子要素に対して以下のクラスを指定しても継承が優先されるためか反映されませんでした。

table.none{border-style:none;}
table.none td{border-style:none;}

HTMLタグに直接以下のように指定しても同様でした。

<table style="border-style:solid;">

どこかのサイトでは継承をリセットする必要があるような事が書いてあったような気がします。

もちろん継承を利用せず<table>および<td>個々にクラスを指定すれば(不必要なタグには指定しなければ)可能だと思いますが、これだと大きなテーブルの場合に非効率で悩んでいます。

どのようにすれば子要素の子要素にスタイルを継承させないようにできるでしょうか?

スタイルシートについてまだ初心者なため質問させてください。

以下のようにテーブルのボーダーのスタイルを子要素(<table><td>)にスタイルを継承(?)させているのですが、この方法だと子要素の子要素(<table><td><table><td>)に対しても継承されてしまいます。

table.border { border-style:solid; border-width: 1px 1px 1px 1px; border-collapse: collapse; }
table.border td { border-style:solid; border-width: 1px 1px 1px 1px; }

table.border > td {…} という指定の方法もあるようで...続きを読む

Aベストアンサー

微妙に把握してませんがこう?

table.border table.none td {
border:0px none;
}

「css 優先順位」などで検索するといろいろヒットしますよ

QAccessで指定する色数値の一覧ありませんか?

MsAccess 2002でフォームを作成しているのですが、フォームの色指定に使える色数値の一覧表はどこかにありませんでしょうか?

VBAを使いRGB関数で指定しても期待したとおりの色を取得することができません。
Accessで使用できる色数値の一覧を参照できるページなどご存知の方いらっしゃいましたらよろしくお願いします。

Aベストアンサー

#1です。先程のページの最後に「このホームページで表示している色は近似色です。正確な色ではありませんので御注意下さい。」と書いてありますので、もしかしたらうまく同じ色が出ないかも知れないですね。
とりあえずカラーチャートのリンク集がありましたので見てみて下さい。
http://www2u.biglobe.ne.jp/~color/all/l_02a_chart.htm

参考URL:http://www2u.biglobe.ne.jp/~color/all/l_02a_chart.htm

QCSSでflotさせた要素を親要素で幅いっぱいに表示したい

以下のHTMLソースで、リストをfloatで横並びにし、
親のdivに対して3列ずつで左右余白なく幅いっぱいに
表示させたいと考えております。

<div>
<ul>
<li><img></li>
<!-- 複数リストを繰り返し -->
<li><img></li>
</ul>
</div>

例えば以下のようなCSSを書いた場合、

 div {width:500px;}
 li {float:left; width:150px; margin-left:10px;}

左端はそろいますが、右端に余白が出来てしまいますよね。

各リストに対して左端用クラス、右端用クラスみたいなものを
指定すれば実現は可能だと思いますが、出来るだけHTMLを編集せず
実現したいと考えております。

IE6~7・safariでとりあえず表示させたいです。
どなたか知識のある方、ご教授の程よろしくお願いいたします。

Aベストアンサー

divにwidthを指定しても良いのであれば、liに指定するwidthの3倍の値を指定すればよい気がしますが。

div {width:501px;}
li {float:left; width:167px;}

何か不都合でもあるんでしょうか?

Q一覧にある名前に該当する名前を赤くしたいのですが…

こんばんわ、いつもお世話になっています。

Excelのシートで
「シート1」に名前一覧を作り、「シート2」に名前を入れていくと「シート1」に名前がある人を入力すしたとき入力した文字を赤くしたり太字させることは可能ですか?

Aベストアンサー

Sheet1のA列を全て選択して、挿入-名前-定義で適当な名前を付けます。(例 リスト)
Sheet2のA列を全て選択して、書式-条件付き書式で「数式が」にして

=NOT(ISERROR(MATCH(A1,リスト,0)))

と入力し、書式を設定します。

これで希望のようになりますか?

Qbefore疑似要素で画像を指定した場合の文字位置

いつもいつもお世話になっています。

before 疑似要素で画像を指定した時、画像が文字サイズより大きいとすると
次にくる文字の位置(縦)が画像の下のラインに合っています。

画像の中央から文字を開始したいのですが、なかなかうまいこといきません。
なにとぞ、ご教示ください。

現在は、以下のように指定しています。

---------------------------------------------------------
CSS
---------------------------------------------------------
.test{
border:1px solid #39C;
color:#006699;
}

.test:before{
float:left;
padding-top:0px;
padding-right:10px;
content: url("../img/icon.gif");
}

---------------------------------------------------------
HTML
---------------------------------------------------------
<p class="test">
あああああ
</p>

いつもいつもお世話になっています。

before 疑似要素で画像を指定した時、画像が文字サイズより大きいとすると
次にくる文字の位置(縦)が画像の下のラインに合っています。

画像の中央から文字を開始したいのですが、なかなかうまいこといきません。
なにとぞ、ご教示ください。

現在は、以下のように指定しています。

---------------------------------------------------------
CSS
---------------------------------------------------------
.test{
border:1px solid #39C;
color:#006699;
}

.tes...続きを読む

Aベストアンサー

 画像は置換インライン要素ですから、contentプロパティで内容を追加すると、当然ベースラインを合わせて表示されます。
 そこで、positionプロパティで位置を指定する必要があります。そのとき、absoluteを使用するなら、他の要素と切り離されて直近のstatic以外の親コンテナブロックの位置が基準になります。relativeを使用すると本来の位置からずらして表示させることが出来ますが、この場合本来表示されるべき位置・サイズにそれがあると他の要素が判断しますから注意してください。
 floatはいくらなんでも使わないでしょう。


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

人気Q&Aランキング

おすすめ情報