Form fields not matching line width

[gvolfe]

Hello,

I have a form which has a certain style sheet associated with it and I just added a new field to this form which is "country". The rest of the fields are single line text, but the "Country" field is a dropdown and thus it looks much thinner than the rest. I need some help to make the country field the same width as the other fields. Here is a screenshot:

[Stephanie-OG]

It's likely the stylesheet adds padding to the single link text and not to drop-down menus. 

If you could include a link or preview link to the page we should be able to take a look and advise on how to update your CSS. 

Thanks!

---

Stephanie O'Gay Garcia

HubSpot Design / Development

Website | Contact

If this helped, please mark it as the solution to your question, thanks!

[gvolfe]

Hi Stephanie, here is a link to the LP:

https://app.hubspot.com/content/5196899/edit/7558092003/content

[AJLaPorte_diagr]

Hi @gvolfe,

The url you provided will not work unless we are assigned as users in your portal. Instead, you will need to use the link from the preview area in the content. See below for a reference on where you can get this URL. 

Location of Preview URL in the content editor

[gvolfe]

My apologies - here it is:

http://resources.adestotech.com/smart-server-iot-1?hs_preview=IJjdLpQi-7558092003

Thank you!!

[dennisedson]

@gvolfe, styling forms is tricky.  each browser wants to do its own thing to each of the elements.  I would recommend starting with adding appearance: none to the select.   make sure to add vendor prefixes.  you will then need to decide how you want to add the up down arrow for the select.  you can accomplish this using the pseudo element :after

look on codepen for examples!

good luck

[stefen]

@gvolfe in your stylesheet "Adesto_January2019-style.css" add the following to your select/input styles:

-moz-appearance: none;
-webkit-appearance: none;
appearance: none;

Looks like it's on line 1657. Also, I'd highly recommend this article on styling select elements for further improvements and cross browser consistency. Cheers!