Style the dropdown arrow design

Question

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 class="wpcf7-form-control-wrap" data-name="menu-173">
    <select name="menu-173" class="wpcf7-form-control wpcf7-select" aria-invalid="false">
    <option value="test">test</option>
    <option value="1">1</option>
    <option value="2">2</option>
    </select>
</span>

It does look as though the ::after psuedo element isn't supported in all browsers too https://stackoverflow.com/questions/3532649/problem-with-select-and-after-with-css-in-webkit — Adam, Oct 27 '22 at 17:02

score 0 · Accepted Answer · answered Oct 27 '22 at 17:03

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>

Style the dropdown arrow design

1 Answers1

Snippet from linked thread.