実現したいこと
レクトボックスの矢印のデザインを変更したくて、下記のURLを参考に、自分なりにカスタマイズしてみたり、したのですが上手くいきません。
付属画像の左側が自分が書いたコードのWeb表示になります。そして画像の右側にあるようなデザインにセレクトボックスの矢印を変更したいです。
どうしたらよいでしょうか?全く同じデザインでなくても構いません。ブラウザに対応できるものが良いです。
どうしたらよいでしょうか?困っています。ご教授お願いいたします。自分の書いたコードは下にあります。
https://junpei-sugiyama.com/select-arrow/
上のURLと同じようにカスタマイズしてみたのですが、例えば、セレクトボックスをWebの真ん中に持っていくと、セレクトボックス内の矢印が左側に配置されたりしてしまします。
◎コード
html
1<!DOCTYPE html> 2 3<html> 4 5<head> 6<meta content="text/html; charset=utf-8"/> 7 8 <title>お問い合わせ</title> 9 <link rel="stylesheet" href="syoki.css"> 10 <style> 11 12 13/* セレクトボックスの位置 */ 14 15 .auto-style2 { 16 margin: auto; 17 text-align: center; 18 19 } 20 21</style> 22</head> 23<body> 24 25<form> 26 27 <h2>支払方法:※</h2> 28 <div class="auto-style2"> 29 30 <select name="list" id="pay"> 31 32 <option value=""></option> 33 <option value="クレジットカード"<?php if(isset($pay) && $pay==="クレジットカード") { echo "selected" ;} ?>>クレジットカード</option> 34 <option value="銀行振込"<?php if(isset($pay) && $pay==="銀行振込") { echo "selected" ;} ?>>銀行振込</option> 35 36 </select> 37 </div> 38 <p></p> 39 <p></p> 40 <p></p> 41 42 <span colspan="2"><input type ="submit" name ="submit"value="確認画面へ"></span> 43 44</form> 45 </body></html>
syoki.css
css
1/* セレクトボックスのスタイル */ 2 3#pay { 4 5 border: 2px solid #63e02d; /* 枠線 */ 6 padding: 0.5em; /* 内側の余白量 */ 7 background-color: snow; /* 背景色 */ 8 width: 28.8em; /* 横幅 */ 9 height: 56px; /* 高さ */ 10 font-size: 1em; /* テキスト内の表示文字サイズ */ 11 color: #000000; 12 line-height: 1.2; /* 行の高さ */ 13 14}
回答1件
あなたの回答
tips
プレビュー