プルダウンメニューの作り方。

コード　「html　css」
 <link rel ="Stylesheet"href ="style.css">
 <label for "お名前">お名前</label>
<select class="classic">
</select>
<br><br>

/*css*/
select {

  background-color: white;
  border: thin solid black;
  display: inline-block;
  font: inherit;
  line-height: 0.5em;
  /*プルダウンメニュー長さ*/
  padding: 0.5em 3em ;

  margin: 0;      
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
}


select.classic {
  background-image:
    linear-gradient(45deg, transparent 50%, black 50%),
    linear-gradient(135deg, blue 50%, transparent 50%),
    linear-gradient(to right, skyblue, skyblue);
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    100% 0;
  background-size:
    5px 5px,
    5px 5px,
    2.5em 2.5em;
  background-repeat: no-repeat;
}

select.classic:focus {
  background-image:
    linear-gradient(45deg, white 50%, transparent 50%),
    linear-gradient(135deg, transparent 50%, white 50%),
    linear-gradient(to right, gray, gray);
  background-position:
    calc(100% - 15px) 1em,
    calc(100% - 20px) 1em,
    100% 0;
  background-size:
    5px 5px,
    5px 5px,
    2.5em 2.5em;
  background-repeat: no-repeat;
  border-color: grey;
  outline: 0;
}

html,css初心者です。
2枚目の写真のように、プルダウンメニューをつくりたいのですが、うまくいきません。
教えてほしいです。よろしくお願いします。

ex025

2020/08/20 11:35

具体的に、どこをどう改良したいのですか。三角形の位置と大きさを調整したいということですか。

jingjing

2020/08/20 13:41

返信ありがとうございます。白黒にしたいです。そして、▼を真ん中んしたいです。よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

こんばんは。

こんな感じですか？

サンプル

CSS
1select.classic {
2  background-image:
3    linear-gradient(45deg, transparent 50%, black 50%),
4    linear-gradient(135deg, blue 50%, transparent 50%),
5/*    linear-gradient(to right, skyblue, skyblue); */
6    linear-gradient(to right, black 0px, white 1px);
7  background-position:
8/*    calc(100% - 20px) calc(1em + 2px),
9    calc(100% - 15px) calc(1em + 2px), */
10    calc(100% - 20px) calc(1em + -5px),
11    calc(100% - 15px) calc(1em + -5px),
12    100% 0;