Gravity Forms, Change Select Field Drop Down Arrow with Font Awesome

Gravity forms, change select field drop-down arrow with Font Awesome and tweak the look of the arrow to meet your needs.
Check the code below to turn this look:

To this:

In the ID “#gform_X” add your “X” form number.

#gform_X select {
    background:transparent;
    color: #fff;
    border-radius: 20px;
    border: #0b818f;
    font-size: 20px;
    text-align: center;
    appearance: none;
    -webkit-appearance: none;
    z-index:2;
    position:relative;
}
 #gform_X select option {
     color:#444;
 }
  
 #gform_X .ginput_container_select {
   position:relative;
   background: #0b818f;
   border-radius:50px;
  }
 #gform_X .ginput_container_select::before {
  content: "\f078";
  color: #fff;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position:absolute;
  right:30px;
  top: 8px;
  z-index:1;
}
Scroll to Top