Jump to content

Mobile Forms Defaulting on Font + Color Despite Code

Recommended Posts

Site URL: https://www.wildwestflorals.com/

Hi! I am in need of some guidance. I have styled this form (with the below code) and it looks great on desktop and on mobile preview - however when you are actually on mobile the form defaults on the font and adds a blue color to the dropdown.  Any ideas on how to fix this? 

// contact form //

.form-wrapper .field-list .field select { font-family: 'Silk Serif';
}

.form-wrapper input[type="submit"] {
 display: border;
}
.form-wrapper .field-list .title{
   font-family:'Silk Serif'!important;
  
}
.form-wrapper .field-list .field .caption{
  font-family:'Silk Serif'!important;
  text-align: center !important;
}

.form-wrapper .field-list .description{
   font-family:'Silk Serif'!important;
  text-align: center !important;
}

.form-wrapper .field-list .field .field-element
 {
  outline: none !important;
}
.form-wrapper .field-list .field select
{font-family:'Silk Serif';
font-size: 10px;
text-transform: uppercase;
}

.form-wrapper .field-list .field select {
    padding: 0px;
    width: 100%;
  background-color: #FAFAFA
}

 

IMG_4578.jpeg

Screen Shot 2022-03-20 at 9.46.04 AM.png

Link to comment
  • Replies 2
  • Views 496
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • 2 months later...
On 3/20/2022 at 12:56 PM, LauraLeighGedeon said:

Any ideas on how to fix this? 

The css below should work for your site.

.form-wrapper .field-list .field select {
  font-family:'Silk Serif' !important;
  font-size: 10px;
  text-transform: uppercase;
  color: inherit;
 }

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.