<div class="c-block-input">
  <div class="c-block-input__items">
    <div class="c-block-input__title">セレクトボックス
    </div>
    <div class="c-block-input__select">
      <select>
        <option>選択肢1</option>
        <option>選択肢2</option>
        <option>選択肢3</option>
      </select>
    </div>
  </div>
</div>
.c-block-input__items {
  margin-bottom: 32px
}

.c-block-input__title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
  display: block
}

.c-block-input__select select {
  text-transform: none;
  display: block;
  font-size: 16px;
  line-height: 1.3;
  height: 50px;
  padding: 6px 16px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  box-shadow: none;
  margin: 0;
  border: 1px solid #999;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  background-image: url("https://grow-group.jp/wp-content/uploads/2021/04/img-select.png");
  background-position: top 50% right 20px;
  background-repeat: no-repeat;
  border-radius: 4px !important;
  position: relative
}

.c-block-input__select select::-ms-expand {
  display: none
}

.c-block-input__select select:focus {
  border-color: #E6A54D;
  outline: none;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.