Contact Form 7 - How Do I Style The Select Arrow and Select Options - wordpress

Question

I'm building a website using Contact Form 7 for WordPress and am having issues styling the select menu. Specifically, I cannot move the arrows or add padding to the dropdown so it's not so tight.
I've tried using this CSS to add spacing to the dropdown items (and some other CSS trickery) but it has no effect:
options {
padding: 20px 10px!important;
margin: 20px 10px!important;
line-height: 36px!important;
border-bottom: 10px solid tan!important;
}
Do you know if there's a way to control the styling behavior of CF7's select menu (arrow and options dropdown)?
Thank you!
Demo Website:
https://miles.birdhouse-demos.com/connect/

Answer 1

CSS styling for <select/> fields is very limited and does not allow you to achieve this. You will need to use a hybrid field plugin that constructs dropdowns with HTML lists that can be styled, such the Hybrid HTML Dropdown plugin, which can be styled and can be loaded on your page to convert your existing <select/> fields into hybrid ones,
<script type="text/javascript">
(function(){
let sel, hyd;
document.addEventListener('DOMContentLoaded', (e) => { //instantiate on document ready.
sel= document.querySelector('#my-select-list');
hyd = new HybridDropdown(sel,{});
})
})
</script>
Alternatively, you can install the Smart Grid-layout extension for CF7 which has a dynamic-dropdown field tag you can use instead of the CF7's default dropdown, and has as the option to display as a Hybrid Dropdown field for you.

Answer 2

Try this
It's possible to customize the dropdown arrow with this code:
select {
-webkit-appearance: none;
-moz-appearance: none;
background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png);
background-repeat: no-repeat;
background-position-x: 98%;
background-position-y: 2px;
}
Here is a list about what you can do with this code:
Remove completely the arrow, to do so, simply remove this line: "background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png);"
Customize the arrow size. You need to add the following line to the code given above: background-size: 30px 30px;
You can change the value in px.
Change the arrow, to do so, replace the URL in the following line of code: "background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png);"
This guide will help you to inject the code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes
If you have any questions, let me know.
Thanks.
Credit: Kevin - From: https://www.jotform.com/answers/2449062-how-can-i-remove-modify-change-the-dropdown-arrow-using-css