I have a select field in my form and I want to style the field arrow. I want to add a color background to the arrow (not for all fields) and change the position. The arrow is located in the end of field now. I've tried to add css to the field but it doesn't work

I've tried the following:

.wpcf7-select:after {
  content: '\25BC';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  font-size: 25px;
  border: 1px solid #565656;
  background: #0e7b53;
  color: #fff;
  padding: 11px 15px;
  pointer-events: none;
}

input,
select {
  height: 62px;
  width: 100%;
  background: #20232C;
  border: none;
  padding-right: 0px;
  padding-left: 30px;
  color: #fff;
}

.wpcf7-form-control-wrap {
  position: relative;
}

span {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

<span  data-name="menu-173">
    <select name="menu-173"  aria-invalid="false">
    <option value="test">test</option>
    <option value="1">1</option>
    <option value="2">2</option>
    </select>
</span>

CodePudding user response：

This thread details how to hide the default arrow on most browsers (not IE9 and below though), and add your own stylable arrow.

Snippet from linked thread.

Please read the thread to understand what this code entails.

select {
  margin: 50px;
  width: 150px;
  padding: 5px 35px 5px 5px;
  font-size: 16px;
  border: 1px solid #CCC;
  height: 34px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(https://stackoverflow.com/favicon.ico) 96% / 15% no-repeat #EEE;
}


/* CAUTION: Internet Explorer hackery ahead */


select::-ms-expand {
    display: none; /* Remove default arrow in Internet Explorer 10 and 11 */
}

/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
    select {
        background: none\9;
        padding: 5px\9;
    }
}

<select>
  <option>Apples</option>
  <option selected>Pineapples</option>
  <option>Chocklate</option>
  <option>Pancakes</option>
</select>