html - CSS - change dropdown arrow to unicode triangle -

i've customized <select> using this:

background-color:#ececec; border:0; border:1px solid #e3e3e3; border-radius:3px; width:100%; font-family:'futurastdlightoblique', sans-serif; font-size:16px; color:#616263; outline:none; height: 40px; 

but want change dropdown arrow fits design. use unicode triangle ▼ (▼) alternative arrow down , if possible, set same color texts in select tag.

any ideas on how can achieve without using aside css/html? in advance.

maybe so?

*, *:before, *:after {      box-sizing: border-box;  }    * {      padding: 0;      margin: 0;  }    body {      padding: 1rem;  }    .b-select-wrap {      height: 40px;      width: 240px;      border: 1px solid #e3e3e3;      color: #616263;      overflow: hidden;      position: relative;      border-radius: 3px;  }    .b-select-wrap:after {      content: "▼";      padding: 12px 8px;      position: absolute;      right: 10px;      top: 0;      z-index: 1;      text-align: center;      width: 10%;      height: 100%;      pointer-events: none;      }    .b-select {      height: 40px;      width: 100%;      padding: 5px 15px;      background-color: #ececec;      border: 0;      outline: none;      font-size: 16px;      -webkit-appearance: none; /* webkit browsers */      -moz-appearance: none; /* firefox */      appearance: none; /* modern browsers */  }    /* remove default caret ie */  .b-select::-ms-expand {     display:none;  }

<div class="b-select-wrap">      <select name="namevalueselect" class="b-select">          <option value="-1" selected>choose option ...</option>          <option>option 1</option>          <option>option 2</option>          <option>option 3</option>          <option>option 4</option>          <option>option 5</option>          <option>option 6</option>      </select>  </div>