Customizing Drop Down Menus in Form Fields

Hi Stephsullivan,

In order to do this you have to add custom CSS styles for the form select fields. You will also have to add the radius, because unbounce does not target select fields by default.

You can target all select fields by using this selector and adding the following css styles:

<style>
.lp-pom-form-field select {
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 20px;
}
</style>

Ensure the border-radius is set to what you want.

I’ll note that removing the default appearance will prevent select arrows from showing. A way around this is to use a background image, or a css wrapper with another class to add an arrow using a border trick. Here’s the css trick to that to add an arrow:

<style>
  .lp-pom-form-field.drop-down::after {
    content: "";
    position: absolute;
    right: 12px;
    bottom: 14px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #000;
  }
</style>

To keep this clean, we can combine these together!
I’ll also note that these styles might not be a “perfect fit” depending on the height of your form fields. You might need to edit the “bottom” and “border-radius” css properties. To change the arrow size, simply change all 3 border CSS properties to the size you want and keep them the same pixel size.

<style>
  .lp-pom-form-field select {
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 20px; /* Change this if needed */
  }
  .lp-pom-form-field.drop-down::after {
    content: "";
    position: absolute;
    right: 12px; /* Change this if needed */
    bottom: 14px; /* Change this if needed */
    border-left: 5px solid transparent; /* Change this if needed, ex: 5px */
    border-right: 5px solid transparent; /* Change this if needed, ex: 5px */
    border-top: 5px solid #000; /* Change this if needed, ex: 5px */
  }
</style>

Here’s an example page for you!
https://temporary.paracore.com/support/

Let me know if you have any questions.