[HTML/CSS]セレクトボタンの書き方で分からないことがある

この画像のようにセレクトボタン????????の書き方を教えていただきたいです。

■ブラウザ
google cloome

html
1<div class="select">
2      <select class="select_city">
3        <option>Select a city</option>
4      </select>
5      <p class="select_create">Create an experience</p>
6    </div>

css
1.select {
2  text-align: center;
3  margin: 24px auto;
4  width: 474px;
5  font-size: 2.2rem;
6}
7
8.select_city {
9  border: 1px solid #88939e;
10  border-radius: 30px 30px 0px 0px;
11  padding: 17px 41px;
12  width: 474px;
13  font-size: 2.2rem;
14  color: #88939e;
15}
16
17.select_create {
18  background-color: #fd5c74;
19  border-radius: 0px 0px 30px 30px;
20  display: block;
21  padding: 17px 134px;
22  color: #fff;
23}

現状、このようになってしまっていて困っています。
どなたかお願いします。

ここまでできました。

矢印に関しても解決しました。

不明点

以下の画像のような上下矢印を二つつけるのができないです。

現状、矢印を消しただけでコードがうまく反映されません。
自分のコード何か間違っているところはありますか？？

このコードでできると思ったんですが、できなかったです。

HTML
1<div class="choice_select">
2 <select class="choice_select_common choice_select_language">
3  <option>Engilish</option>
4  <option>Japan</option>
5 </select>
6 <select class="choice_select_common  choice_select_country">
7  <option>EUR</option>
8  <option>JPN</option>
9 </select>
10</div>

CSS
1.choice {
2  display: flex;
3  justify-content: center;
4  margin: 141px 122px 0px;
5  font-size: 2.2rem;
6  justify-content: space-between;
7}
8
9.choice_select_common {
10  position: relative;
11}
12
13.choice_select_common::before,.choice_select_common::after {
14  content: '';
15  width: 0;
16  height: 0;
17  z-index: 1; /* select画面より前に矢印を配置できるように */
18  position: absolute; /* 絶対位置への配置 */
19  box-sizing: content-box; 
20  border: 10px solid transparent;
21  right: 10px;
22}
23
24.choice_select_common::before {
25  border-bottom: 10px solid #88939e;
26  top: 10px;
27}
28.choice_select_common::after {
29  border-top: 10px solid #88939e;
30  top: 40px;
31}
32

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

回答2件

CSSだけだと、かなり大変だと思います。
通常の三角ならまだしも、角丸三角となると、
けっこうきついかと。
（できなくはないが、大変）
大人しく、SVGかPNG画像（三角の部分）を使い、
それをCSSで表示調整するって形でいくべきかと。

label要素をうまく使うと、やりやすいかもしれません。

あとは、そういうselectや、input type="radio"などのデフォルトの表示を変えるのはけっこう大変です。
（質問の状態までくる時点でけっこう大変だったとお察しします）
また、ブラウザによっても調整の仕方が変わったり、下手すると、あるブラウザでは不可能って可能性もあります。
（JS使う羽目になる可能性も大いにある）

投稿2020/06/02 08:41

miyabi_pudding

総合スコア9528

a44k

2020/06/03 04:43

ありがとうございます。そのような方法もあるとは、知らなかったです。解決はできてきました。更に質問を追加したのですが、上下矢印をつけるのがうまくいかないところがあります。自分のコードの間違いが分からんくて、ご指摘お願いしたいです、

miyabi_pudding

2020/06/05 07:32 編集

sousukeさんのコメント通り、 selectには擬似要素（:beforeと:after）は使えない、が正答なので、私の回答にあります、 > label要素をうまく使うと、やりやすいかもしれません。をやってみてください。

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

borderいじってごちゃごちゃやればできますが普通に画像置くほうがいいでしょう。
位置調整はtopとrightでやります。

css
1
2.select {
3 position: relative;
4}
5
6.select::before,.select::after {
7  content: '';
8  width: 0;
9  height: 0;
10  z-index: 1;
11  position: absolute;
12  box-sizing: content-box;
13  border: 10px transparent solid;
14  right: 10px;
15
16}
17.select::before {
18  border-bottom: 10px solid #333;
19  top: 10px;
20}
21.select::after {
22  border-top: 10px solid #333;
23  top: 40px;
24}