Solved

Form Field Styling

  • 20 February 2020
  • 1 reply
  • 149 views
Katie_Luke

Hey everyone,

I am looking to style the form fields outside of the default styling options given in the right panel in the unbounce editor. Specifically, I want to put a border bottom and have no fill (so that the form field is just an underline). I have tried targetting the field with this code:

#first_name.ub-input-item.single-text.form_elem_first_name { background: rgba(0,0,0,0); border-bottom: 2px solid white; }

It does not seem to be working. Could someone let me know if they have successfully formatted form fields and how they did it?

Thanks in advance!!!

icon

Best answer by Kenneth.Koh 21 February 2020, 01:10

View original

1 reply

Kenneth.Koh

Hi Katie!

That’s doable! With the use of some custom CSS, we can adjust how form fields look on pages. Try installing that as a custom CSS stylesheet on your page, making sure that #lp-pom-form-353 is changed to the form’s ID and #untitled1 is changed to the multi-line field’s ID.

You can also adjust the line’s width and colour by adjusting the border-bottom attribute.

//for multi line fields, change the ID's of the form and field
<style>
  #lp-pom-form-353 .lp-pom-form-field #untitled1{
  background:transparent;
  border-style: hidden hidden solid hidden; !important;
  box-shadow: none;
  border-radius: 0px;
  border-bottom: 1px solid black;
  }
</style>

//for single line fields, change the ID of the form
<style>
  #lp-pom-form-353 .lp-pom-form-field input[type=text]{
  background:transparent;
  border-style: hidden hidden solid hidden; !important;
  box-shadow: none;
  border-radius: 0px;
  border-bottom: 1px solid black;
  }
</style>

Reply


Terms & ConditionsCookie settings