レクトボックスの矢印のデザインを変更したくて、下記のURLを参考に、自分なりにカスタマイズしてみたり、したのですが上手くいきません。
付属画像の左側が自分が書いたコードのWeb表示になります。そして画像の右側にあるようなデザインにセレクトボックスの矢印を変更したいです。
どうしたらよいでしょうか?全く同じデザインでなくても構いません。ブラウザに対応できるものが良いです。
どうしたらよいでしょうか?困っています。ご教授お願いいたします。自分の書いたコードは下にあります。
https://junpei-sugiyama.com/select-arrow/
◎コード
<!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; /* 行の高さ */
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テーブル内でドロップダウンメ...
-
<SELECT>タグの折り返し
-
セレクトメニューで2つの項目...
-
selectタグ内の特定のoptionの...
-
[html]ラジオボタンを使った診...
-
セレクトボックスから別窓にジ...
-
JSONで文字列が長い時
-
Application.ScreenUpdating = ...
-
16進の10進変換について
-
関数「exists」と「defined」の...
-
switch文のエラーについて
-
formで特定のinputを送信しない...
-
VBAでPDFのコピーとリネームを...
-
Perlで自分自身の関数名を知る...
-
Perlからメール送信で文字化け
-
python3について。
-
子windowsからsubmit()後にclos...
-
コンボボックスのtag情報の取得...
-
エクセルVBA シート名の部分一...
-
Sendmailの文字化けについて
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
文字の横にプルダウンを表示さ...
-
<SELECT>タグの折り返し
-
セレクトメニューで2つの項目...
-
テーブル内でドロップダウンメ...
-
セレクトボックスのselected属...
-
複数列を持ったリストボックス...
-
同じものを繰り返し表示させる
-
セレクトボックスから別窓にジ...
-
セレクトボックスの「選択して...
-
セレクトボックスである項目を...
-
プルダウンメニューの幅
-
SELECT OPTIONの中身をコピペ...
-
プルダウンリストの背景色の指定
-
selectタグ内の特定のoptionの...
-
ドロップダウンリストのselecte...
-
【プルダウンで選んでGOボタン...
-
セレクトメニューで選んだ値を...
-
セレクトボックスの中を一部隠...
-
プルダウンメニューのターゲッ...
-
HTMLでメディアプレイヤーの再...
おすすめ情報