Adjusting dropdown hover highlight color and mobile form width

Hello,

I'm hoping for help to make two changes:

1. I'd like to change the color of this hover-highlight on dropdowns. Currently it's a red/pink color, and I'd like to change it to #0075E1
2. I'd like to make the width of the mobile form wider. I'd like to extend it by about 30 pixels on each side, but I might have to play with those dimensions on my own. Do you know where that information lives or the CSS selector I can use for those? I don't want to adjust desktop at all, just mobile.

Thank you - your team has been so great with quick responses. I appreciate it!

Hi Holly,

I understand what you’d like to do, but I’ll need a bit of time to work out a solution.  I’ll get back to you as soon as I can.

Thank you Aries, I appreciate that!

Hi Holly,

Thanks for your patience. You can customize the highlight color when hovering over the drop down field by injecting custom CSS codes. I also included the custom CSS codes to customize the mobile width. Let me show you how with the cloned version of your form:

1. Copy the custom CSS codes below:

input:focus, input:hover, textarea:focus, textarea:hover,select:focus, select:hover {

box-shadow:  #0075E1 2px 2px 2px 2px!important;

border-color:  #0075E1 !important

}

2. In Form Builder, click on the roller paint icon.

3. Go to Styles.

4. And scroll down and paste the custom CSS codes into the text area.

To adjust the form width in mobile view, you can inject the custom CSS codes below:

@media screen and (max-width:480px){

  .form-all{

    width: 200px;

  }

Give it a try and let us know if you have any other questions.

Thank you! Do you know how to adjust the padding/margins here, to the left and right of the form itself?

I tried

 padding-left:0px !important;

  margin-left:0px !important;

which didn't work.

Hi Hollyswanson,

Yes, you can adjust it by going to the advanced designer option. It's easy, let me show you how:

1. In Form Builder, click on the blue roller icon.
2. Once you're on the colors tab, scroll down and click advanced designer.
3. On the design tab, click on form layout.
4. You can now edit it based on your preference.
5. go to the upper left side and click on save changes.

Give it a try and let us know how it goes.

Hi Paolo,

Thank you, but I need to adjust this for mobile only. I need a way to minimize the space to the left and right of the form, and I didn't see that in advanced designer.

Hi Hollyswanson,

I understand what you’d like to do, I’ll need a bit of time to work out a solution. I’ll get back to you as soon as I can.

Thank you! This update is urgent for a website launch we have coming up, so I appreciate your support in a quick answer.

Hi Hollyswanson,

Thanks for your patience. For you to minimize the space to the left and right of the form, you need to inject the custom CSS code below:

@media only screen and (max-width: 480px){

  ul.form-section{

    padding: 0px 10px;

  }

}

Please note that you can adjust the 10px based on your preference on how little the padding you want on the sides. The default is 38px. Let me show you how to inject the custom CSS codes:

1. Copy the custom CSS codes above.
2. In Form Builder, click on the roller paint icon.
3. Go to Styles.
4. Scroll down and paste the custom CSS codes into the text area.

Give it a try and let us know how it goes.

Thank you, that looks like it worked! I appreciate it! :)