フォームのスタイルについて教えてください

このQ&Aのポイント
  • プルダウンメニューの色変更方法について教えてください
  • フォントとバックカラーの色は変えられるが▼部分はどうすればいいですか?
  • スタイルシートでフォームを定義していますが、▼部分の記述方法がわかりません
回答を見る
  • ベストアンサー

フォームのスタイルについて教えてください

プルダウンメニューを書いていて、色を変えたくなったんですが上手くいきません。 フォントとバックカラーの色は変えられるのですが、▼のある部分はどう記述すれば いいのでしょうか??? 教えてください。 (スタイルシートでフォームを定義しています) <style type="text/css"> <!-- INPUT { background: #FFFFFF; color: BLUE;} SELECT { background: #FFFFFF; color: BLUE;} -->                          ↑ここに何を記述すればいいのでしょうか? </style>

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

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

  • ベストアンサー
  • kumosuke
  • ベストアンサー率45% (33/73)
回答No.1

質問とは少し離れてしまうのですけど…… フォームの部分に直接指定したほうがいいと思いますよ。 例えば…… <SELECT NAME="selLink" onChange="LinkSelect(this.form, this)" STYLE="font-size:9pt;color:#00000;background:#FFFFFF;"> <OPTION SELECTED VALUE="-">------Quick LINK------ <OPTION VALUE="main.htm">  ☆★ HOME ★☆ <OPTION VALUE="osake.htm">● おさけふり~く <OPTION VALUE="osake/liqueur.htm">├ リキュール <OPTION VALUE="osake/brandy.htm">├ ブランデー <OPTION VALUE="osake/whisky.htm">├ ウィスキー <OPTION VALUE="osake/beer.htm">├ ビール <OPTION VALUE="osake/wine.htm">├ ワイン <OPTION VALUE="osake/rum.htm">├ ラム <OPTION VALUE="osake/gin.htm">├ ジン <OPTION VALUE="osake/nihon-shu.htm">├ 日本酒 <OPTION VALUE="osake/shoutyu~.htm">├ 焼酎 <OPTION VALUE="osake/tyu~goku-shu.htm">└ 中国酒 </SELECT> といったように、プルダウンのフォームに直接インラインでスタイルシートを記述してやるわけです(抜き出し↓)。 SELECT STYLE="font-size:9pt;color:#00000;background:#FFFFFF;"

coolman
質問者

補足

kumosuke さん、ありがとうございました。直接記述してみます。 でも、プルダウンの「押す」ところの色はどうやって変えるのでしょう???

その他の回答 (1)

  • kumosuke
  • ベストアンサー率45% (33/73)
回答No.2

はあ^^; どうもすいません、アドバイスのつもりだったもんでm(_ _)m えっとですね、今現在、プルダウンのあそこ(▼)の色を変える方法はないはずです。 あくまでテキスト部分の色を変える方法しかない、と。 「んじゃ、なんでアドバイスにあんな書き込みしたんだ!」とお叱りを受けそうですが…… 文字の大きさを指定してやると、▼の大きさを若干ですけどいじることができるよ~、と^^; それくらいしかできないはずです。 自分の中で、あれをいじれないのは常識になっていたものですから…… 完全に説明不足でした、すいませんm(_ _)m

関連するQ&A

  • スタイルシートの記述について

    例えば、文字を黒く、背景色を白くしたい場合ですが、どちらの記述が正しいですか? (1)は兄が教えてくれたタグの書き方で、(2)はネットで見かけたタグ(CSSについて説明していたサイト)の書き方です。 カッコの違いが気になっています。 ネット検索をしたところ、(2)の形で書かれているほうが多かったです。 今は『<!-->』は、もう古かったりなどして使わない形なのでしょうか。 それとも(2)の『{}』のみの形はCSSとして使う場合なのでしょうか。 (1) <style type="text/css"> <!--P{color:#000000;}--> <!--BODY{background-color:#ffffff;} </style"> (2) <style type="text/css"> p{color: #000000;} body{background-color:#ffffff;} </style">

  • 入力フォームとプルダウンメニューに関して

    入力フォームとプルダウンメニューを重ねて表示し、入力フォームを上部に表示したいのですが、自分で試してみるとプルダウンメニューが入力フォームの上部に表示されてしまいます。 入力フォームを上部に表示したいのですが、 やり方がわかりません。教えて下さい。 よろしくお願いします。 <html> <head> <title></title> //CSSの定義 <style type="text/css"> <!-- span{ position:relative; left:70px; } --> </style> </head> <body> <span> //入力フォーム <input type="text" name="input" size="10" maxlength="1"> </span> //プルダウンメニュー <select> <option></option> <option>あああ</option> <option>いいい</option> <option>ううう</option> <option>えええ</option> <option>おおお</option> </select> </body> </html>

  • スタイルシートのリンクについて

    スタイルシートを下記の様に記述しました。 そこでリンクの部分なのですが ポインタが上にのった時にff6666になるようにしているのですが、 ff9900のままなのです。 通常はffcc00 既読はff9900 ポインタ上にのった時にff6666 クリックした時にff0000としたいのです。 どなたかお教え下さい。 <style type="text/css"> <!-- BODY { SCROLLBAR-FACE-COLOR: #ffffff; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; SCROLLBAR-SHADOW-COLOR: #ffcc00; SCROLLBAR-ARROW-COLOR: #ffcc00; SCROLLBAR-BASE-COLOR: #ffffff; SCROLLBAR-DARKSHADOW-COLOR : #ffffff; SCROLLBAR-3DLIGHT-COLOR : #ffcc00} body,tr,td {font-size: 9pt;} body,tr,td {color: #ffcc00;} a {text-decoration: none;} a:link {color: #ffcc00;} a:hover {text-decoration: underline;} a:hover {color: #ff6666;} a:active {color: #ff0000;} a:visited {color: #ff9900;} body { background-repeat: no-repeat; background-position: 100% 100%; background-attachment: fixed;} --> </style>

    • ベストアンサー
    • CSS
  • css フォームのプルボタンを使う場合

    cssでselect(プルダウンメニュー)を定義すると、 その後のフォーム(例えばテキストフィールド)のレイアウトが崩れます。 お詳しい方、ご教授いただければ幸いです。 ======================================= html側の記述です ======================================= <form accept-charset="UTF-8" action="/mmm" > <div style="margin:0;padding:0;display:inline"></div> <div class="field"> <label for="vvv">氏名</label> <input id="vvv_name" name="vvv[name]" size="30" type="text"> </div> <div class="field"> <label for="xxx">好きな果物</label> <select id="xxx" name="site[ftp_id]"><option selected="selected" value=""></option> <option value="1">りんご</option> <option value="2">さくらんぼ</option></select> </div> <div class="field"> <!--#ここのレイアウトが崩れます--> <label for="yyy">好きな動物</label> <input id="yyy" name="yyy[yyy]" size="30" type="text"> </div> </form> ======================================= cssの記述です ======================================= * { margin: 0; padding: 0; } .field { width:500px;} .field label { width:230px; float:left; color:#FFFFFF; background-color:#001207; display:block; height: 2em; line-height :2em; margin-top:10px; } .field input { width:200px; float:left; color:#FFFFFF; margin-top:10px; height: 2em; } .field select { width:200px; float:left; color:#FFFFFF; margin-top:10px; height: 2em; } どうぞよろしくお願い致します。

    • 締切済み
    • CSS
  • CSS:スタイルシートでテキストリンク

    教えてください!! 外部ファイルのスタイルシート(CSS)を使って、各ページへジャンプするテキストリンクをマウスオーバー時に太字になるように設定しています。 IE6.0では問題なく起動していますが、NS7.1,Firefox1.0では、機能していません。何か対処方法はないでしょうか? ↓私の記述は以下の通りです↓ 【外部ファイルへのリンクの記述】 <link rel="stylesheet" type="text/css" href="../menu.css" title="menu" /> 【外部ファイル内のCSSの記述】 .menu { font-family: "MS Pゴシック", Osaka; font-size: 12px; font-style: normal; line-height: 14px; color: #FFFFFF; text-decoration: none; } .menu a:link { color: #FFFFFF; text-decoration: none; } .menu a:visited { color: #FFFFFF; text-decoration: none; } .menu a:hover { color: #FFFFFF; font-weight: bold; text-decoration: none; } .menu a:active { color: #FFFFFF; font-weight: bold; text-decoration: none; }

  • スタイルシートで。。

    こんにちは。 外部CSSをリンクさせてCSSを反映させています。 そこで質問です。 リンク箇所には下線がでるようにしていますが、リンクのある画像にまで下線がついてしまうのです。 画像だけには適用させない、というようなタグはありますか? ちなみにこういうのを記述してます a:link{color:#cccccc;text-decoration:none;border-bottom: #ffffff 1px dashed;} a:visited{color:#cccccc;text-decoration:none;border-bottom: #ffffff 1px dashed;} a:active{color:#cccccc;text-decoration:none;border-bottom : #ffffff 1px dashed;} a:hover{color:#cccccc ;text-decoration:none;background-color : #688999; border-bottom : #ffffff 1px dashed;} なにか回避方はありませんでしょうか? 教えてください、よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • スタイルシート…

    たぶん、初歩的な問題なんですが…自力では調べてもわからなかったので… スタイルシートで、画像を固定し、尚且つ、 リンクの貼ってある文字の上にカーソルがくると文字色が変わるようにしたいのですが、 どのようにすればよいのでしょうか? 一応、 <style type="text/css"> <!-- body { background-image : url("画像のURL"); background-attachment: fixed; background-position: 100% 0%; background-repeat: no-repeat ; } a{text-decoration:none;} a:link {color:#色;} a:active {color:#色;} a:visited {color:#色;} a:hover {color:#色;} --> </style> じゃないかな…?と思って、試してみたのですが、画像は固定できてるんですが、 リンクの文字色は変わりませんでした…。 アドバイスお願いします!

    • ベストアンサー
    • HTML
  • 文字の色をスタイルシートで設定した時、ハイパーリンクの文字の色を変えたいのですが

    スタイルシートの定義で質問です。 文字の色をスタイルシートで設定したとき、ハイパーリンクの文字の色を変えたいのですが やり方が分かりません。よろしくお願いします。 htmlは次の様に書いてます。 これだと、ハイパーリンク文字にマウスをおいても白文字のままです。 この時、赤色にかえたいのですが。 <head> <style type="text/css"> .style1 { color: #FFFFFF; font-size: small; } a:hover { color: red; text-decoration: none; } </style> </head> <body> <a href="xxxx.htm"> <span class="style1">ハイパーリンク文字</span></a> ・ ・ </body>

  • Dreamweaverで、直接タグにスタイルを適用したい場合・・・

    Dreamweaverでテキストとかにスタイルを適用すると、 ヘッダーの部分にまとめて記述をしてくれますが、 Dreamweaverでタグに直接記述させる方法はあるのでしょうか? 例えば、↓このような記述なんですが、 <h2 style="width: 300px; font-weight: bold; color: #ffffff; background-color: #8484ee;">テスト</h2>

  • スタイルシート

    スタイルシートで、<style type="text/css"> で始まりますが、フォントなどの色を変える時に span style="font-size:20pt">大きなフォント</span> のように、後の="text/css"はつけなくてもよいのでしょうか?

専門家に質問してみよう