リストボックス(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プルダウンリストの背景色の指定

お世話になります。
現在作成しているwebページがあり、下記のようにプルダウンリストの背景色を設定しております。
<select>
<option style="background-color: #FF0000;">サンプル1</option>
<option style="background-color: #00FF00;">サンプル2</option>
<option style="background-color: #0000FF;">サンプル3</option>
<option style="background-color: #FFFFFF;">サンプル4</option>
</select>
このページにおきまして、サンプル3を選択したときに、プルダウンリストに「サンプル3」と表示され、背景色が#0000FFになるようにしたいのですが、
上記のままだと、IEでは背景色も変化しますが、firefoxですとプルダウンリスト内に「サンプル3」と表示されても背景色は白のままです。

IEとおなじ動きになるようにするには、どうしたらよいでしょうか。
ちなみに、

<select style="background-color: #FF0000">

にすると、IE、firefoxともにプルダウンリストの背景色が変更できたので、javascriptでoptionのvalueをとり、それをselectのstyleに設定できれば。。。
と考えたのですが、javascriptはほぼ無知なので、上記の方法でも解決できずでした。

簡単に解決できる方法などございますでしょうか。
もしくは、javascriptで解決できますでしょうか。

どうぞ宜しくお願いいたします。

お世話になります。
現在作成しているwebページがあり、下記のようにプルダウンリストの背景色を設定しております。
<select>
<option style="background-color: #FF0000;">サンプル1</option>
<option style="background-color: #00FF00;">サンプル2</option>
<option style="background-color: #0000FF;">サンプル3</option>
<option style="background-color: #FFFFFF;">サンプル4</option>
</select>
このページにおきまして、サンプル3を選択したときに、プルダウンリストに「サンプル3」と表示され...続きを読む

Aベストアンサー

「スタイルシートのクラス名」

<html>
<head>
<title>TAG index Webサイト</title>
<script type="text/javascript">
<!--
function chBackGround(e) {
e.className=e.options[e.selectedIndex].className;
document.getElementById('submit').focus();
}

window.onload = function() {
document.getElementById('key').className='color01';
}
// -->
</script>
<style type="text/css">
<!--
.color01 {
background-color: #FF0000;
}

.color02 {
background-color: #00FF00;
}

.color03 {
background-color: #0000FF;
}

.color04 {
background-color: #FFFFFF;
}
-->
</style>
</head>
<body>
<form name="f1" action="./DB.cgi" method="POST">
<div>
<select id="key" name="key" onchange="chBackGround(this)">
<option class="color01">
サンプル1
</option>
<option class="color02">
サンプル2
</option>
<option class="color03">
サンプル3
</option>
<option class="color04">
サンプル4
</option>
</select>
</div>
<input id="submit" type="submit" value="表示">
<input type="hidden" name="mode" value="display">
</form>
</body>
</html>

「スタイルシートのクラス名」

<html>
<head>
<title>TAG index Webサイト</title>
<script type="text/javascript">
<!--
function chBackGround(e) {
e.className=e.options[e.selectedIndex].className;
document.getElementById('submit').focus();
}

window.onload = function() {
document.getElementById('key').className='color01';
}
// -->
</script>
<style type="text/css">
<!--
.color01 {
background-color: #FF0000;
}

.color02 {
background...続きを読む

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

Qjavascriptでセレクトボックスの"selected"を動的につ

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
</select>月

<select name='day'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
<option value='13'>13</option>
<option value='14'>14</option>
<option value='15'>15</option>
<option value='16'>16</option>
<option value='17'>17</option>
<option value='18'>18</option>
<option value='19'>19</option>
<option value='20'>20</option>
<option value='21'>21</option>
<option value='22'>22</option>
<option value='23'>23</option>
<option value='24'>24</option>
<option value='25'>25</option>
<option value='26'>26</option>
<option value='27'>27</option>
<option value='28'>28</option>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日


このセレクトボックスに、例えば今日の日付"2010年9月30日"だったら、それぞれの年、月、日の<option>に"selected"をつけたいのですが、javascriptではどのようにして実現したら良いのでしょうか?

よろしくお願いします。

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8...続きを読む

Aベストアンサー

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<option value='2009'>2009</option>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
</select>月

<select name='day'>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日
</div>
</form>

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<opt...続きを読む

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Qセレクトボックスのselected属性の値について

プログラミング初心者です。

セレクトボックスのselected属性で、<option selected>か、<option selected="selected">で選択済みになりますが、<option selected="???">の???に入る値は「selected」しかないのでしょうか?
例えば、<option selected="false">みたいな感じで、selected属性を書いておいて選択済みにしないということはできないでしょうか。

回答よろしくお願いします。

Aベストアンサー

ありません。
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/interact/forms.html#adef-selected
http://www.w3.org/TR/html401/interact/forms.html#adef-selected
「省略可能であり、記述された場合は値はselectedとなる」ということなので
<option>
<option selected>
<option selected="selected">
しかありません。
2番目は、「記述された場合は値はselectedとなる」というところから3番目と同じ意味になる、ということです。

なお、「選択済みにしない」という発想は変です。
<option>はいずれかが選択済みならばほかは選択されていないからです。
「どれも選択されていない状態」(それもそれでHTML的にはよろしくないですが)は、どれにもselectedを付けなければいいのです。

一応、JSから操作する場合は
(その要素).selected = true(false)
で変更できます。

ありません。
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/interact/forms.html#adef-selected
http://www.w3.org/TR/html401/interact/forms.html#adef-selected
「省略可能であり、記述された場合は値はselectedとなる」ということなので
<option>
<option selected>
<option selected="selected">
しかありません。
2番目は、「記述された場合は値はselectedとなる」というところから3番目と同じ意味になる、ということです。

なお、「選択済みにしない」という発想は変です。
<option>はいずれかが選...続きを読む

QSELECT要素の垂直位置

SELECTをheight指定で高さを広げています。

<select style='height:30px;'>
<option value='1'>要素1</option>
<option value='2'>要素2</option>
<option value='3'>要素3</option>
<option value='4'>要素4</option>
</select>

IE8だと要素文字列がプルダウン表示枠の下に寄ってしまいます。
FireFoxやIE9以上だと垂直方向の中央に寄ります。

できれば、これをIE8でも垂直方向の中央に寄せたいのですが、
方法がわかりません。宜しくお願いします。

IE8だと
┌─────────────
│                   
│                   ▼
│要素1               
└─────────────

↓ IE8でもこうしたい

FireFoxやIE9以上だと
┌─────────────
│                   
│要素1               ▼
│                   
└─────────────

SELECTをheight指定で高さを広げています。

<select style='height:30px;'>
<option value='1'>要素1</option>
<option value='2'>要素2</option>
<option value='3'>要素3</option>
<option value='4'>要素4</option>
</select>

IE8だと要素文字列がプルダウン表示枠の下に寄ってしまいます。
FireFoxやIE9以上だと垂直方向の中央に寄ります。

できれば、これをIE8でも垂直方向の中央に寄せたいのですが、
方法がわかりません。宜しくお願いします。

IE8だと
┌─────────────
│           ...続きを読む

Aベストアンサー

 formのユーザーインターフェースに関わる物は基本的にスタイルシートで変更はできません。出来たとしても弄るべきではありません。
 サイトごとに、ユーザーインターフェースが異なると困るからです。

 ただ、標準モードだと下記の通り・・
p.form{line-height:60px;}
p.form select,p.form select option{display:block;height:60px;}


<form action="./">
 <p>本文項記事</p>
 <p class="form">
  <select name="test">
   <option value='1'>要素1</option>
   <option value='2'>要素2</option>
   <option value='3'>要素3</option>
   <option value='4'>要素4</option>
  </select>
 </p>
</form>

★UIに関わる部分---例えばカソールとか---は弄らないは原則です。
 すべてのユーザーがfirefoxやIE,Chrome使っているわけじゃない。
【引用】____________ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )]より

 formのユーザーインターフェースに関わる物は基本的にスタイルシートで変更はできません。出来たとしても弄るべきではありません。
 サイトごとに、ユーザーインターフェースが異なると困るからです。

 ただ、標準モードだと下記の通り・・
p.form{line-height:60px;}
p.form select,p.form select option{display:block;height:60px;}


<form action="./">
 <p>本文項記事</p>
 <p class="form">
  <select name="test">
   <option value='1'>要素1</option>
   <option value='2'>要素2</optio...続きを読む

Qセレクトボックスの「選択してください」選択しても、未選択として扱いたい

メールフォームを作成しています。
CGIのメールプログラムを使って、セレクトボックス「A」を必須入力項目としたのですが、一番上のものが「選択されている」とみなされてしまい、改めて選択しなくても、メールが送信できてしまいます。

<select name="A">
<option value="選択してください">
選択してください</option>
<option valui="1">1</option>
<option valui="2">2</option>
<option valui="3">3</option>
<option valui="4">4</option>
</select>

どうしたらいいでしょうか。
助けて下さる方、お待ちしております。

Aベストアンサー

<option value="選択してください">
選択してください</option>

<option value="">
選択してください</option>
にすればいいのでは?

Qプルダウンメニュー項目のフォント色の変更

JavaScriptで取得した10日後までの日付と曜日をプルダウンメニューの項目に設定し、任意の日付をユーザーに選択し
てもらうようにしたのですが、プルダウンメニューの項目の一部(日曜・祝日など)のフォント色を変えることは可能でしょ
うか?(あるいは、逆に背景に色を付けるなど)
もし、そのような方法がありましたらご教示ください。
よろしくお願いします。

Aベストアンサー

<html>
<head><style>.r{background-color:#fdd;color:#550;}</style>
<body>
<select id="a">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">これを赤くする</option>
<option value="4">4</option>
</select>

<script language="JavaScript">
window.onload=function(){
document.getElementById('a').options[3].className='r';
}
</script>
</html>

Q横スクロールバーを表示したい

スクロールバーの色を変更するために下記のタグを埋め込んだ所、
今まで表示されていた横スクロールバーが消えてしまいました。
横スクロールさせないと見えない部分があるので、ぜひ表示させたいです。
どうか教えてください!

Win98se・IE6
HPビルダーでどこでも配置モードを利用しています。

<STYLE type="text/css"><!--body {scrollbar-face-color:#ffffff;
scrollbar-track-color:#ffffff; scrollbar-arrow-color:#C0C0C0;
scrollbar-highlight-color:#808080; scrollbar-shadow-color:#C0C0C0;
scrollbar-3dlight-color:#ffffff;
scrollbar-darkshadow-color:#ffffff;
overflow-x : hidden ;} -->
</STYLE>

Aベストアンサー

overflow-x : hidden ;

横スク出しちゃいやん、の印(笑)

overflow-x : auto;
横スク出るなら出てしまえ。

overflow-x : scroll ;
横スク必ず出してやる!

この行がない場合はoverflow-x : auto;と同じ意味です。
・・・言うてもIE互換モードだけだけどー。

QCSSでボックス幅を文字列に合わせたい

ボックス幅を文字列の幅に合わせるにはどうしたらいいのでしょうか。
テーブルではセルにwidth属性を指定しなくても文字列の幅になりますが、ボックスではwidthプロパティを指定しなかったら領域全体の幅になります。white-spaceプロパティでnowrap指定し、widthプロパティで文字列より小さいサイズに指定するとできるのですが、他に指定する方法があれば教えて下さい。

Aベストアンサー

div等のblock要素ではなくspan等のinline要素によって行う。

<span style="border:solid 1px">文字幅に合わせた枠線</span>


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

人気Q&Aランキング

おすすめ情報