電子書籍の厳選無料作品が豊富！

レクトボックスの矢印のデザインを変更したくて、下記のURLを参考に、自分なりにカスタマイズしてみたり

解決済

  • 質問者：pjdmgam
  • 質問日時：
  • 回答数：1件

レクトボックスの矢印のデザインを変更したくて、下記の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; /* 行の高さ */

「レクトボックスの矢印のデザインを変更した」の質問画像
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (1件)

参考程度に

No.1ベストアンサー

  • 回答者： fujillin
  • 回答日時：

こんにちは



ご提示のサイトには説明も書いてあるので、ここで説明しても重複するだけです。

方法の一つに、背景画像を利用するものが説明されているので、それをコピペして、画像データを入れ替えれば、いかようにもお好みにできるのでは？
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。そうですね。書店で調べてみました。情報ありがとうございます。解決出来ました。

通報する
お礼日時：2021/04/19 22:42

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報