セレクトボックスの矢印を大きな緑色の矢印にしたいです
- セレクトボックスの矢印を大きな緑色の矢印にしたいですが、入力フォームとセレクトボックスの横幅と縦幅は変更せずに実現したいです。
- レスポンシブ対応に苦戦しているので、コードを整理しました。付属画像のようなセレクトボックスのデザインにしたいです。
- 以下のHTMLとCSSのコードを使用しています。回答をお願いいたします。
- ベストアンサー
セレクトボックスの矢印を大きな▼の緑色の矢印にした
同じような質問ですいません。 入力フォームとセレクトボックスの横幅と縦幅を変更せずに セレクトボックスの矢印を大きな▼の緑色の矢印にしたいです。 何度も同じ質問してすみません。レスポンシブ対応が上手くいかなかったので、少しコードを整理しました。(前回と少し違うコードになります）。 付属画像のような感じにしたいです。 コードは以下にあります。回答よろしくお願いいたします。 <!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8"/> <link rel="stylesheet" href="box.css"> <style> /* 入力フォームの位置 */ .auto-style1 { margin: auto; text-align: center; } /* セレクトボックスの位置 */ .auto-style2 { margin: auto; text-align: center;/* セレクトボックス中央に配置 */ } </style> </head> <body> <form action ="hpform1.php" method ="post"> <div class="auto-style1"> <p class="px-num"> メールアドレス：※ </p> <input type="text" class="email" name="email" id="email" value="<?php if(isset($email)){ echo $email; } ?>"/> </div> <p class="px-num"> 支払方法：※ </p> <div class="auto-style2"> <select name="pay" class="pay" id="pay"> <option value="">支払方法</option> <option value="クレジットカード"<クレジットカード></option> </select> </div> </form> </body></html> ◎◎入力フォームとセレクトボックスのｃｓｓ（boxcss) /* 入力フォームのスタイル */ #email { margin:0 auto;/* レスポンシブ対応中央 */ text-align: center;/* レスポンシブ対応中央 */ border: 3px solid #63e02d; /* 枠線 */ padding: 0.5em; /* 内側の余白量 */ background-color: snow; /* 背景色 */ width: 29.3em; /* 横幅 */ height: 56px; /* 高さ */ font-size: 1em; /* テキスト内の表示文字サイズ */ line-height: 1.2; /* 行の高さ */ box-sizing: border-box;/* レスポンシブ対応中央 */ } /* セレクトボックスのデザイン */ #pay { margin:0 auto;/* レスポンシブ対応中央 */ text-align: center;/* レスポンシブ対応中央 */ border: 3px solid #63e02d ; /*#63e02d 枠線 */ padding: 0.5em; /* 内側の余白量 */ background-color: snow; /* 背景色 */ width: 24.3em; /* 横幅 */ height: 56px; /* 高さ */ font-size: 1.2em; /* テキスト内の表示文字サイズ */ color: #000000; line-height: 1.2; /* 行の高さ */ box-sizing: border-box;/* レスポンシブ対応中央 */
- hayosat
- お礼率13% (80/572)
- CSS
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
セレクトボックスの▼をCSSで変更することはできません。 <select>タグを使わずJSを使って独自実装するか、ご希望のデザインになっているフレームワークを利用しましょう。
関連するQ&A
- 決済フォームのセレクトボックスの矢印
決済フォームのセレクトボックスの矢印を（付属画像のように三角の大きい目立つデザインにしたいです。 付属画像の緑色のフォームは自分のコードのWEBの表示画像です。 どうしたらよいでしょうか？回答よろしくお願いいたします。 コードは下にあります。HTML CSS <!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8"/> <title>お問い合わせ</title> <link rel="stylesheet" href="syoki.css"> <link rel="stylesheet" href="syokigazou.css"> <style> /* 入力フォームの位置 */ .auto-style1 { margin: auto; text-align: center; } /* セレクトボックスの位置 */ .auto-style2 { margin: auto; text-align: center;/* セレクトボックス中央に配置 */ } </style> </head> <body> <form action ="hpform1.php" method ="post" class="auto-style1"> <p class="px-num"> 支払方法：※ </p> <div class="auto-style2"> <select name="pay" class="pay" id="pay"> <option value="">支払方法</option> <option value="クレジットカード"<?php if(isset($pay) && $pay==="クレジットカード") { echo "selected" ;} ?>>クレジットカード</option> <option value="銀行振込"<?php if(isset($pay) && $pay==="銀行振込") { echo "selected" ;} ?>>銀行振込</option> </select> </div> </form> </body></html> ◎◎ｃｓｓのコード（syokicss) /* セレクトボックスのデザイン */ #pay { border: 3px solid #63e02d; /* 枠線 */ padding: 0.5em; /* 内側の余白量 */ background-color: snow; /* 背景色 */ width: 24.3em; /* 横幅 */ height: 56px; /* 高さ */ font-size: 1.2em; /* テキスト内の表示文字サイズ */ color: #000000; line-height: 1.2; /* 行の高さ */ } /* 入力フォームとフォーム間のの上下の余白， */ input.email{margin:8px 0px;} /* セレクトボックスの上下の余白， */ select.pay{margin:8px 0px;} /* pxで指定 入力フォーム、セレクトボックスの上の文字タイトルの行間の大きさ、文字サイズ、太さ*/ .px-num{ line-height: 0px;/* 文字の行間 */ font-size: 22px;/* 文字の大さ */ font-weight: 900;/* 文字の太さ */ text-align: center;/* 文字を中央に配置 */ color: #63e02d; }
- ベストアンサー
- CSS
- セレクトボックス内の文字の文字の大きさを変更したい
セレクトボックス内の文字の文字の大きさを変更したいのですが、上手くいきません。付属画像にある、上のセレクトボックス（緑色）は自分のコードのWeb表示画像なのですが、同じく付属画像の下にある、セレクトボックス（青色）は選択するセレクトボックス内の文字が少し大きく表示されています。（他の会社のHP画像です。）ちなみにセレクトボックス自体の大きさはどちらも同じ大きさです。 文字を大きくしたいのですが、どうしたらよいでしょうか？また、文字を大きくすると、勝手にボックス横幅が広がってしまうでしょうか？ 以下がコードになります。 <!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8"/> <title>お問い合わせ</title> <link rel="stylesheet" href="syoki.css"> <style> /* セレクトボックスの位置 */ .auto-style2 { margin: auto; text-align: center; } </style> </head> <body> <form> <h2>支払方法：※</h2> <div class="auto-style2"> <select name="list" id="pay"> <option value=""></option> <option value="クレジットカード"<?php if(isset($pay) && $pay==="クレジットカード") { echo "selected" ;} ?>>クレジットカード</option> <option value="銀行振込"<?php if(isset($pay) && $pay==="銀行振込") { echo "selected" ;} ?>>銀行振込</option> </select> </div> <p></p> <p></p> <p></p> <span colspan="2"><input type ="submit" name ="submit"value="確認画面へ"></span> </form> </body></html> ◎（syoki.css）◎ /* セレクトボックスのスタイル */ #pay { border: 2px solid #63e02d; /* 枠線 */ padding: 0.5em; /* 内側の余白量 */ background-color: snow; /* 背景色 */ width: 28.8em; /* 横幅 */ height: 56px; /* 高さ */ font-size: 1em; /* テキスト内の表示文字サイズ */ color: #000000; line-height: 1.2; /* 行の高さ */
- ベストアンサー
- CSS
- CSSでボックスを中央に表示させたい
CSSでボックスを中央に表示させたいのですが、 {float:left; width: 800px; heght: 100px; height: 100px; margin: auto; text-align:left;} こんな感じでできるかと思ったのですができません。 既存の質問にもあったように margin: auto; text-align:left; と入れたのですが、左寄せのままでした。
- ベストアンサー
- CSS
- css box ieだけ中央寄せ出来ない
サイトを作っています。CSSのBOXを使って、メイン部分を構成しているのですが、IEだけ中央寄せされません。どのようにすれば解決できますか？できれば<div style="text-align:center">内容</div>は使いたくないです。 <style type="text/css"> <!-- body { background-color: #EEEEEE; } .mainbox{ width:900px; height:1000px; padding:6px 6px 2px 2px; border:8px; margin-left: auto; margin-right: auto; text-align:left; background-color:#bde9ba;} body { overflow: hidden; } --> </style> <div class="mainbox"> 内容 </div> 質問に関係ありませんがクローム、オペラ、モジラでは正常に表示できるのになぜIEだけはちゃんと働かないのでしょうか？ IE迷惑ですｗ
- ベストアンサー
- CSS
- CSS 画像中央そろえ
スタイルシートを利用して、以下のことを実現させたいのですができません。 解決方法を探しています。 ■症状 ページ全体は左寄せ ページの中身は画像単体だったり、表があったりします。 画像は中央寄せ、表も中央寄せ、表の中身（テキスト）は左寄せにしたいのですが 以下の環境下でページ中身が左寄せになってしまいます。 ⇒Mac：IE ■CSSソース #box{ ←ページ全体 width:760px; margin: 0px; text-align:center; } .box-center { ←ページ中身 text-align:center; margin:0px auto; padding:0; } .box-red { ←ページ中身の表（外枠） background-color:#FF0000; padding:5px; margin:0px auto 20px auto; } .box-yellow { ←ページ中身の表（内側） background-color:#FFF299; line-height:150%; text-align:left; } ■HTMLソース（抜粋） <div id="box"> <div class="box-center"> <img src="～"> <div class="box-red"> <div class="box-yellow">～</div> </div> </div> </div> お分かりになる方、いらっしゃいませんでしょうか？ よろしくお願いします。
- ベストアンサー
- その他(業務ソフトウェア)
- 【至急】ボックスの高さ指定
base（３つのボックスを包囲する）のボックスに背景画像をつけています。baseの中にboxを３つ横に並べてます。 ■box左は画像（背景黒でパディングで画像に黒枠をつけているようにみせている※アウトラインでやったらIEだと表示されなかったので） ■box真ん中は仕切り線（背景はなし） ■box右はテキスト（背景グレー）にしてます。 質問内容： box右【テキストの高さ】に合わせて、baseの【背景画像】とbox真ん中の【仕切り線】を延長させるにはどうすればいいのでしょうか？ （html） <div class="base"> <div class="box1_img"> <a href="#"><img src="#" alt=""></a> </div> <div class="box2_line"><img src="images/spacer.gif" width="1" height="1" alt=""></div> <div class="box3_text"> <ul class="list-y"> <li>ああああ</li> <li>いいいい</li> <li>うううう</li> <li>ええええ</li> <li>おおおお<a href="#">かかか</a></li> </ul> </div> </div> （css） ul{ margin: 0; padding: 0; list-style-type: none; text-decoration: none; display: block; } li { margin: 0; padding: 0; } .base { width: 618px; height: 100%;（←分からない？？） margin: 0; padding: 8px 10px 0 10px; text-align: left; line-height: 1.5em; background-image: url(../images/content_bg.gif); background-repeat: repeat-y; } .base .box1_img { width: 130px; height: 97px; margin: 0; padding: 2px; float: left; background: black; } .base .box2_line { width: 2px; height: 100%;（←分からない？？） margin: 0 10px 0 10px; padding: 0; float: left; border-right: dotted 2px #ccc; } .base .box3_text { width: 450px; margin: 0; padding: 5px; float: left; text-align: left; background: #eee; } ul .list-y{ font-weight: bold; text-align: left; } とっても切羽詰まってます！！ すぐに回答いただけると、とっても助かります。 よろしくお願いいたします。
- ベストアンサー
- CSS
- 疑似インラインフレームを中央に配置する方法
疑似インラインフレームを中央に配置する方法 疑似インラインフレームを画面中央に配置する方法を教えてください。 ちなみに、以下のような記述を試してみたのですが…。 【css】 body { text-align: center; margin-top: 100px; color: #555555; font-size: 10px; font-family: "ＭＳ Ｐゴシック"; } *{ margin:0px; border:0px; padding:0px; line-height:100%; } .box{ text-align: center; padding-bottom: 50px; } .box_scroll{ text-align: center; width: 300px; height: 200px; padding: 10px 10px; overflow: auto; } 【xhtml】 <div class="box"> <img src="img.jpg" width="100" height="50" alt="img" /> </div> <div class="box"> <div class="box_scroll"> ---文章--- </div> </div> 初めの<div class="box">は中央に配置されるのですが、疑似インラインの部分は左に寄ってしまいます。 他にも他の方の質問を参考に試してみたのですが、初心者の為いまいちよくわからず、うまくいきませんでした。 どうか回答よろしくお願いいたします。
- ベストアンサー
- HTML
- スタイルシートの横並びリスト中央配置について
#Area_Navi { margin: 0; padding: 0; } #Area_Navi ul { margin-left: auto; margin-right: auto; text-align: center; list-style-type: none; list-style-position:inside; } #Area_Navi li { text-align: center; display: inline; padding: 0; margin-left: auto; margin-right: auto; float: left; width: 200px; } #Area_Navi a { display: block; border-left: 1px solid #000000; border-top: 1px solid #000000; border-bottom: 1px solid #000000; background-color: #FFFFFF; font-size: 20pt; padding: 3px; text-decoration: none; color: #000000; margin: 1px 0px; text-align: center; } スタイルシートは上記なのですが、うまく中央配置されず 半端に左寄せになっています。 windows7 firefox を使用しています。 調べて position:relative; と記載しても上手く中央寄せになりませんでした。 どなたか、教えて頂けませんか。 宜しくお願い致します。
- ベストアンサー
- CSS
- （ＣＳＳ）画像が完全に右端に寄りません・・・
ＣＳＳ勉強中でソースの不備が多々あると思いますがどうかみていただけますでしょうか・・。 <div class="bar">の画像の一番端の右下に<p class="px">の画像を隙間無く持ってきたいのですがどうしても<p class="px">の右側が空いてしまいます・・。対処方法がございますでしょうか。 根本からソースが違うかもしれません・・何卒お願いいたします！ .pattern_box { width:708px; padding:0px 26px; text-align:right; } .pattern_box .bar { width:708px; margin:0px; } .pattern_box .px { float: right; display: inline; margin: 0px 0px 10px auto; text-align:right; } .pattern_box .inner { margin:10px 0px 0px 0px; text-align:left; font-size:12px; line-height:18px; } ★ＨＴＭＬ <div class="pattern_box"> <div class="bar"> <img src="h2_bar01.gif" alt="" width="708" height="20"> </div> <p class="px"><img width="145" height="62" src="h2_bar01_ill.gif"></p> <div class="inner">テキストテキストテキスト</div> </div><!--pattern_box-->
- ベストアンサー
- CSS
- ボックスの文字を中央に表示したいのですが
<style> .header1{width:760px; height:30px; background-color:#CCCCCC; text-align:center; vertical-align:middle } </style> ........................ <p class="header1" >あいうえおかきくけこさしすせ TEL : xxxx-xx-xxxx</p> 文字の表示はボックスの中央に来るのですが垂直方向が上方向にずれてしまいます。上下方向も中央に表示させるにはどういう指定をすれば良いのでしょうか?
- ベストアンサー
- HTML
