How to Add Arrow to Drop Down Menu

SOLVE
IHeckman
Participant

Hi everybody,

 

On this form that a client has to fill out on our page in order to pick his country of residence and the product he would like to inquire about, how do I add an arrow to both boxes to indicate that they are, in fact, drop down lists? 

 

Thank you! Screen Shot 2021-05-27 at 2.05.30 PM.png

 

0 Upvotes
1 Accepted solution

Accepted Solutions
DanielSanchez
Solution
Key Advisor

Hi @IHeckman ,

 

Your CSS is hiding your arrow.

DanielSanchez_0-1622668329082.png

 

After disabling the "-webkit-appearance:none;", the arrow returns. Look:

DanielSanchez_1-1622668393310.png

 

In that case, you can just fix the CSS by removing or commenting out this item from your code, or if you don't have technical knowledge, you can in your Page Editor, click on "Settings" and in the <head> enter the following code:

aaa

 

<style>
select {
    -webkit-appearance: listbox!important;
}
</style>

 

 

DanielSanchez_2-1622668843729.png

 

 

Did this post help solve your problem? If so, please mark it as a solution.

Best! 

View solution in original post

3 Replies 3
DanielSanchez
Key Advisor

Hi @IHeckman 

 

If it is a HubSpot form or a select field, the arrow is already visible. It is automatic for a field to select having an arrow.

 

Anyway, send a link to your page, so that we can better understand how your field code and CSS are.

 

Did this post help solve your problem? If so, please mark it as a solution.

Best!

IHeckman
Participant

Hi Daniel,

 

For some reason this is the only form out of many that we have on our website (www.reissmotivationprofile.com) where the arrow is not visible. The form appears when a client clicks on the Pricing button which appears on this page: www.reissmotivationprofile.com/products 

 

Thank you for your help!

0 Upvotes
DanielSanchez
Solution
Key Advisor

Hi @IHeckman ,

 

Your CSS is hiding your arrow.

DanielSanchez_0-1622668329082.png

 

After disabling the "-webkit-appearance:none;", the arrow returns. Look:

DanielSanchez_1-1622668393310.png

 

In that case, you can just fix the CSS by removing or commenting out this item from your code, or if you don't have technical knowledge, you can in your Page Editor, click on "Settings" and in the <head> enter the following code:

aaa

 

<style>
select {
    -webkit-appearance: listbox!important;
}
</style>

 

 

DanielSanchez_2-1622668843729.png

 

 

Did this post help solve your problem? If so, please mark it as a solution.

Best! 

View solution in original post