Form Submit Button styling

SOLVE
Highlighted
New Contributor

Hi everyone-

 

I've applied some custom styles to a form submit button but cannot get those styles to show up on  a mobile device. When I preview my style changes with a web inspector, it appears the styles are working correctly on the button. 

 

But when I pull up a link to the same page on my iPhone the button styles are not the same at all.I'm wondering if the styles visible on my phone due to a conflicting CSS class or something else I haven't spotted? 

--------------------------------------------------------

The markup for my button styles is below:

.hs-button.primary, body input[type="submit"] { position:relative; width:35%; background-color: #eb922d; border-radius:0px; border-style:none; color:#ffffff;
font-family:'Merriweather Sans', 'Helvetica', sans-serif;
text-transform:uppercase; letter-spacing:2px; margin-left:35%; margin-right:35%; text-align:center; padding:5% 5% 5% 5%; -webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none; }

 

.hs-button.large.primary {font-size:1.4em; margin:1% 1% 1% 35%; border-style:none; border-radius:0px;
background-color:#eb922d;
color:white;
font-family:'Merriweather Sans', 'Helvetica', sans-serif; margin-left:35%; margin-right:35%; padding:5% 5% 5% 5%;
font-weight:700;
text-transform:uppercase;
text-align:center; position:relative; -webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;}

 

@media only screen
and (min-device-width:320px)
and (max-device-width:600px){.hs-button.large.primary{ font-size: .6em; background-color: #eb922d; color: white;
font-family:'Merriweather Sans';
font-weight: 700;
text-transform: uppercase;
text-align: center; margin: 1% 35% 1% 35%;
border-radius: 0px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}}

@media only screen
and (min-device-width:320px)
and (max-device-width:600px){.hs-button.primary, body input[type="submit"] { width:35%; height:10%; font-size: .9em; background-color: #eb922d; color: white;
font-family:'Merriweather Sans';
font-weight: 700;
text-transform: uppercase;
text-align: center; margin: 1% 25% 1% 25%;
border-radius: 0px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}}

1 Accepted solution

Accepted Solutions
Highlighted
Solution
HubSpot Employee

Hey Lauren,
Creating great looking forms for desktop will always be askew on iOS devices. iOS typically throws in their own "Rounded Corners" on buttons and other things. It inherits these from their own default styles. To fix it, in the CSS for .hs-button.large.primary try adding this code.

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

Also for the border radius problem add this as well,

-webkit-border-radius: 0;
-moz-border-radius: 0;

I hope you make out well.

View solution in original post

4 Replies 4
Highlighted
Solution
HubSpot Employee

Hey Lauren,
Creating great looking forms for desktop will always be askew on iOS devices. iOS typically throws in their own "Rounded Corners" on buttons and other things. It inherits these from their own default styles. To fix it, in the CSS for .hs-button.large.primary try adding this code.

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

Also for the border radius problem add this as well,

-webkit-border-radius: 0;
-moz-border-radius: 0;

I hope you make out well.

View solution in original post

Highlighted
New Contributor

Hi Eric- Thanks so much for your help! I really appreciate it. It worked like a charm. 

0 Upvotes
Highlighted
New Contributor

I had the same issuse and that fixed almost all of it.  but the color of the button is still being overwritten and wont change on a mobile device to the correct color. any ideas?

0 Upvotes
Highlighted
HubSpot Employee

Hey Jason,

I am not entirely sure. Do you have a link to the button you are talking about? I can try to take a peek to see if I can come up with a way to override the default colors being set by the mobile devices. 

0 Upvotes