ドロップダウンの矢印を別のデザインの物に変更したい

Question

HTML5、CSSの基礎学習が終了したので、
初めての模写コーディングに挑戦中の、超初心者です。
https://www.airbnb.jp/host/homes
↑のサイトに取り組んでおります。

ヘッダーデザインの下の
ドロップダウンメニューのデザインを変更したいのですが、
矢印のデザインがデフォルトの物とは違っています。

これはやはり、imageを挿入して作るしかないのでしょうか？
だとすれば画像をサイトからダウンロードし、その方向で作成を進めようと思ったのですが、
ディベロッパーツールを使い、画像のurlを探そうと思ったのですが
それらしきものが見つからず、
「もしや、imgを挿入する方法ではないのでは。。。？」と
グルグル迷っています。

今回、Bootstrapは使わずにやってみています。
Bootstrapも基礎は学習済みですので
使わなければ難しいのであれば、ご指摘ください。

よろしくお願いします。

    <header>
      <div class="img">
           <h1>Airbnbホストになって、暮らしをレベルアップ</h1>
         </div>
       </header>
     
     <section>
       <div class="container">
         <input type="text" value="東京">
      <div class="selecter1">
        <select name="room">
          <option value="all">まるまる貸切</option>
          <option value="one">個室</option>
          <option value="share">シェアルーム</option>
        </select>
      </div>

      <div class="selecter2">
        <select name="members">
          <option value="1">ゲスト1人</option>
          <option value="2">ゲスト2人</option>
          <option value="3">ゲスト3人</option>
          <option value="3">ゲスト4人</option>
          <option value="3">ゲスト5人</option>
          <option value="3">ゲスト6人</option>
          <option value="3">ゲスト7人</option>
          <option value="3">ゲスト8人</option>
          <option value="3">ゲスト9人</option>
          <option value="3">ゲスト10人</option>
          <option value="3">ゲスト11人</option>
          <option value="3">ゲスト12人</option>
          <option value="3">ゲスト13人</option>
          <option value="3">ゲスト14人</option>
          <option value="3">ゲスト15人</option>
          <option value="3">ゲスト16人</option>
        </select>
      </div>
       </div>
     </section>
   

``



```CSS
body{
  margin: 0;
}

header{
  margin-bottom: 8px;
}

.img{
  height:250px;
  background-image: url("../img/header.jpg");
  background-size: cover;
  position: relative;
}

h1{
  font-size: 34px;
  line-height: 36px;
  color: white;
  position: absolute;
  bottom:0;
  margin:0 0 20px 60px;
}

.container{
  width:70%;
  margin: 0 auto;
}


input{
  width: 100%;
  padding: 10px;
  border-radius: 4px;
  border:1px solid gray;
}


button{
  background:#FF5A5F;
  color: white;
  border-radius: 4px;
  width: 100%;
  line-height: 40px;
}

select{
  -webkit-appearance: none;
  padding: 10px;
  display: block;
}

.selecter1{
  padding: 8px 0px 8px 0px;
}
``

Answer 1

ちゃんとSVGタグありますね。画像使ってますよー
一番外のdivタグ(class="_wlf6154")に position:relative が設定してあって、
svgタグを囲っているspanタグ(class="_1kgwncne")に position:absolute が設定してありますね。

<div class="_wlf6154">
    <div class="_y9ev9r">
        <select id="hero_wmpw_v2_room" name="room_type_category" class="_1pwrhpvu">
            <option value="entire_home">まるまる貸切</option>
            <option value="private_room">個室</option>
            <option value="shared_room">シェアルーム</option>
        </select>
     </div>

     <!-- 矢印部分 -->
     <span class="_1kgwncne">
         <svg viewBox="0 0 18 18" role="presentation" aria-hidden="true" focusable="false" style="height: 16px; width: 16px; display: block; fill: rgb(72, 72, 72);"><path d="m16.29 4.3a1 1 0 1 1 1.41 1.42l-8 8a1 1 0 0 1 -1.41 0l-8-8a1 1 0 1 1 1.41-1.42l7.29 7.29z" fill-rule="evenodd"></path>
         </svg>
     </span>
</div>