• ベストアンサー

<select>で表示されるプルダウンのボタンの色を変更したい

ご存知のかたがおられましたらお知恵を拝借させてください。 HTMLの<select>タグでプルダウンリストを表示することが出来ますが、このプルダウンリストの右に出る下向三角ボタン(▼)の色をCSSで変更することは出来ないでしょうか? スクロールバーは変更できたのですが、この三角ボタンがどうしても変更できません。 出来れば、IE8で表示できる方法が好ましいです。 すみませんが、お力添えよろしくお願いいたします。

  • HTML
  • 回答数2
  • ありがとう数3

質問者が選んだベストアンサー

  • ベストアンサー
  • torayoshi
  • ベストアンサー率62% (910/1449)
回答No.1

フォームを構成する部品ならCSSでカスタマイズ可能なんですが、 ▼ボタンは残念ながらフォームの部品ではないのです。 この▼ボタンはWindowsのシステムファイルであるビジュアルスタイルファイル(.msstyles)が受け持つ部品なのです。 なのでビジュアルスタイルを変更しないと変えることは出来ません。 CSSでは変更不可なので諦めて下さい。 一応ビジュアルスタイル変更後の▼ボタンの例を提示しておきます。 CSSで変更出来たらおもしろいんですけどね ^^; http://www16.plala.or.jp/zaq_501/1.png

monmo__
質問者

お礼

さっそくのご回答ありがとうございました! ▼がOS依存部分だったとは意外でした… CSSでの変更は諦めるしかなさそうですね。 ところで、もしご存知であれば重ねて教えていただきたいのですが▼ボタンがOS依存であれば、非WindowsOSなどで▼ボタンがサポートされていないOSなど存在するのでしょうか? もしそうであればプルダウンリストはなるべくWebで使わないほうがいいのかなと思ったもので…

その他の回答 (1)

  • torayoshi
  • ベストアンサー率62% (910/1449)
回答No.2

#1です。 見栄えや▼ボタンなどの操作機能系はGUIの成せる業ですが、 コンシューマ用PCのOSなら必ずと言って良いほどGUIを実装してます。 GUI未サポートOSというとUNIX系がそうでしたが、 現在は一部を除いてほとんどGUIを実装しています。 だから全然気にしなくて良いので普通に使ってください。

monmo__
質問者

お礼

なるほど。 GUI実装OSであれば気にしなくてもよいということですね。 そもそも、ブラウザを使うということはGUI実装OSで使うことがほとんどでしょうから問題なさそうですね。 とても勉強になりました。 ありがとうございました!!

関連するQ&A

  • SELECTのプルダウンの長さの調整

    困っております。。ご存じの方ぜひ教えて頂けたらと思います。 HTMLのSELECTタグでプルダウンを作成しています。 OPTIONで指定しているリストは100件ほどあります。 この状態で▼を押してリストを表示すると、 縦が長すぎで、画面の外に飛び出る場合があります。 こうなると、スクロールバーもつまむことができないので 目的のものが選択できないことがあります。 プルダウンの表示長さを調節することはできませんでしょうか? なお、SELECT以外の代替え案は勝手ながらご遠慮願います。 よろしくお願いしますm(_ _)m

    • ベストアンサー
    • HTML
  • IE8互換表示:プルダウンの三角(▼)の大きさが…

    Internet Explorer 8の互換表示時、HTMLのプルダウンメニュー(<select><option> ~ </option></select>)を複数表示した際、リストを展開するボタンの三角(▼)の大きさが、項目によっては通常よりやや小さめの大きさで描画されるという現象が発生しました。 プルダウンメニューのHTMLやスタイルを確認しましたが、特に何か設定しているわけでもありません。 これは、何か特別な条件を満たした場合に発生するような、IEの仕様なのでしょうか? <補足> ちなみにOSはWindows XP、テーマはクラシックスタイルで当現象を確認しました。

    • ベストアンサー
    • HTML
  • プルダウンメニューのボタンの色を変えるには?

    自分のHPにプルダウンメニューにて曲を選択し、BGMが流れるようにしています。曲を流すことには、著作権等を含め問題ありません。 HPは、白と青を基調とした爽やかな感じにするため、スクロールバーも、バー自体は白、バーの枠とボタンの三角印のみ青に変更しています。 しかし、プルダウンメニューのボタンは通常のグレーに黒の三角です。 コレの色を変える方法、ありますか? タグはまずスクロールバーの色変更は、 <style type=text/css> <!-- body{ scrollbar-face-color:FFFFFF; scrollbar-highlight-color:FFFFFF; scrollbar-shadow-color:3333FF; scrollbar-3dlight-color:3333FF; scrollbar-arrow-color:3333FF; scrollbar-track-color:FFFFFF; scrollbar-darkshadow-color:FFFFFF; } --> </STYLE> 曲を流すタグは、 <SCRIPT language="JavaScript"><!-- function myGo(){ mySelect = document.myForm.myMenu.selectedIndex; if (mySelect == 0) return; myHTML = "bgm.html"; // myTitle = document.myForm.myMenu.options[mySelect].text; myFile = document.myForm.myMenu.options[mySelect].value; myURL = myHTML+"?title="+escape(myTitle)+"&file="+escape(myFile); window.open(myURL , "bgm" , "width=210,height=160"); } // --></SCRIPT> プルダウンメニューを置く場所に <FORM name="myForm"> <SELECT name="myMenu" size="1" onchange="myGo()"> <OPTION value="">BGM</OPTION> <OPTION value="song1.mp3">1曲目</OPTION> <OPTION value="song2.mp3">2曲目</OPTION> <OPTION value="song3.mp3">3曲目</OPTION> </SELECT> </FORM> としています。 ご存知の方、よろしくお願いします。

    • ベストアンサー
    • HTML
  • プルダウンボタン

    WEBページの住所や何かの名称を選択するときにある、 黒い三角ボタン(アローボタン、プルダウンボタン、スクロールボタン?)を使うと10秒から30秒フリーズします。 どうすれば直りますか? OS: windowsXP Home Edition SP3 メモリ:512MB CPU:ペンティアムIII1GHz

  • プルダウンの選択リストの中に画像を埋め込む(表示する)ことはできますでしょうか

    タイトルのとおりなのですが、 プルダウンのリストは通常、テキストのリストから選択するものですが、 プルダウンの選択リストの中に画像を表示させることはできますでしょうか。 プルダウンフォームのoptionタグやCSSの背景に画像を指定したりしたのですが 表示することはできませんでした。 どなたか実現方法をご存知でしたら教えていただけないでしょうか。 よろしくお願いします!

  • multipleを使用するとプルダウンの表示がおか

    質問させて頂きます。 現在急遽仕事でHTMLとPHPによるページにアンケートを追加するという作業を任されたのですが 知識が無い分野で困っております。 内容は現在あるプルダウンを複数選択にするとプルダウンの▼がなくなり 常に開かれた状態になってしまいます。 更に問題なのが一行半分の高さしか開かないので狭い範囲をスクロールする状態になってしまいます。 最初はCSSが原因かと思いCSSを切ってみたのですが改善されませんでした。 ブラウザはファイヤーフォックス、クローム、オペラで確認しました。 記述は現在下記のように行っています。 <select size='1' multiple> <option value=''> </option> <option value="0" >あああ</option> <option value="1" >あああ</option> <option value="2" >あああ</option> <option value="3" >あああ</option> <option value="4" >あああ</option> <option value="5" >あああ</option> </select> チェックボックスで複数選択のやり方も考えたのですが何故か結果を表示するときに array になってしまいこちらも選べない状態です。 プルダウン、リストボックスの高さは調整ができるのでしょうか? お手数ですがご回答の程をよろしくお願いいたします。

    • ベストアンサー
    • PHP
  • プルダウンメニューで中央表示

    プルダウンメニューで中央表示 HTMLのプルダウンメニューで文字を中央寄せにすることは可能でしょうか? ページのレイアウト上、ボックスの幅を広くとっていて、 リストの文字が端によりすぎてしまうので、中央に表示したいのですが、 tableタグなどで使えるalignのようなものはないのでしょうか。 ご存知の方、教えていただけると助かります。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • プルダウンのoptionの表示・非表示はできますか?

    JavaScriptを使ってプルダウン操作をしております。 一つ目のプルダウンで選択したあと2つ目のプルダウンのoptionの部分だけ表示・非表示をしたいのです。そんなことはできるのでしょうか? 下のソースで説明しますが、一つ目のリストで「あいうえお」を選択した時点で2つ目の選択リストの「ひらがな1」と「ひらがな2」だけを選択できるようにしたいのです。「カタカナ1」「カタカナ2」は非表示もしくは選択不可にできればいいのですが。 一つ目のプルダウンリスト <select name="formtype" onchange="form_indicate();"> <option value="AAA">あいうえお <option value="BBB">アイウエオ </select> 二つ目のプルダウンリスト <select name="formtype2"> <option value="aaa">ひらがな1 <option value="bbb">ひらがな2 <option value="ccc">カタカナ1 <option value="ddd">カタカナ2 </select>

  • プルダウンメニュー表示時の高さの指定方法

    ブラウザ上でプルダウンメニューを表示させる際に、表示される高さ(タテ幅)の指定をするにはどうすればよいか、ご存知の方は教えていただけないでしょうか? ちなみに、プルダウンメニューの横幅は、<select>タグ内に、「style="width:(幅を指定);"」を記述することで固定幅の設定が可能でしたが・・・ なお、プルダウンメニューは初期表示として、1件のみ表示させるものとします(すなわち、<select>タグ内の「size="1"」の指定は変えないこととする)。 というのも、プルダウンに表示させる項目(条件によって可変)の件数が多い場合に、プルダウンメニュー内でスクロールさせるのをできるだけ避けたいためです。 よって、方法としては、 1.プルダウン表示させる際の高さ(タテ幅)を固定で指定する 2.可能であれば、登録されている全項目の表示をさせる 以上2つの方法を考えています。 なにかよい方法があれば、ぜひ教えてください。

    • ベストアンサー
    • HTML
  • プルダウンメニューの見た目を変えたい!!!!!!!!……です。

    はじめましてJackMINIと申します。 HP上で『プルダウンメニュー(オプションメニュー)を使いたい』と思うのですが、普通はメニューボタンの見た目がユーザー側の機種やブラウザに依存されてしまいますよね。 ですが、自分の作っているサイトのデザインにあまりに合わないので、その"メニューボタンの見た目"を変えたいのですが、出来る方法はありますでしょうか? (プルダウンの使用目的は、コンテンツのINDEXページからその下層にある各ページに飛べるようにするためです。) 実際には、例えばオリジナルのセレクトボタン画像を作ってsrcでリンクさせたり、形はデフォルトのままでも下地やテキストの色を指定したり…といった形でサイトのデザインに合わせられると良いのですが…。 ちなみに、Mac OS9.x のiCabでも正常に動作するように作っているので、 フォームの<SELECT>タグ<OPTION>タグを使ったオプションメニューを使うつもりです。(…条件が厳しくてスミマセン) もし無理なようでしたら、プルダウンと同じような機能で見た目をカスタマイズできる方法を教えていただけるとヒジョーに助かります。 ただ、FLASHは持っていないので使えません。m(__)m (…お金がないので) HTMLとJavaScript(もしくはCSS)で可能でしたら、多少面倒だったり難解だったりしても構いませんので、何卒御教授お願い致します。

専門家に質問してみよう