By default, the select arrow icon is rendered by the browser and cannot be replaced through an API call. If you want to change the appearance of the arrow, you will need to style the select element and add your own custom arrows on top. Keep in mind that different browsers and operating systems may display the default arrow differently.
To restyle the select item using CSS only, you can target both the select itself and its parent p element. While it's easy to target the select using its ID, targeting the specific p element may require additional code. By examining the provided Wordpress site link, you can target the p element using the CSS selector
label[for=search-box-filter_31] + p
.
To ensure enough space for your new arrow, adjust the select's width and the parent p's padding accordingly. You can use calc(100% + 30px) to increase the select's width. Additionally, make sure the p element shrinks to fit its content by setting display: table.
Create the desired arrow effect using the ::after pseudo-element on the p element. Position it appropriately over the select element to hide the default arrow. You can use inline SVG or background images to create the arrow design. To achieve the blue gradient background beneath the arrows shown in the image, utilize multiple backgrounds with a CSS gradient overlay.
Note that due to the positioning of the ::after element, clicking on the arrows won't display the options. Use pointer-events: none; to pass clicks through, although this might not work on older versions of Internet Explorer.
You can find the CSS code below, or view it directly on CodePen at this link.
#search-box-filter_31 {
width: calc(100% + 30px);
}
label[for=search-box-filter_31] + p {
position: relative;
display: table;
border-radius: 5px;
padding-right: 30px;
}
label[for=search-box-filter_31] + p::after {
content: "";
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 30px;
border-radius: 0 5px 5px 0;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30'><polyline points='8,12,15,8,22,12' fill='none' style='stroke:white;stroke-width:2'/><polyline points='8,18,15,22,22,18' fill='none' style='stroke:white;stroke-width:2'/></svg>"),
linear-gradient(to bottom, #a0d8ff 0%, #2591dd 100%);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
The end result looks like the following image (showing how the default select appears in Firefox on Linux):
https://i.sstatic.net/45rZc.png
Feel free to customize the arrows and their background according to your preferences. Just keep in mind that altering the select arrows will impact the default browser styling. For consistent appearance across different browsers and OS platforms, ensure all select/input elements are styled uniformly.