You might be looking for:
-webkit-appearance: none;
Question
I have isolated my input[type="submit"]
in this JSFIDDLE.
The code as well,
input[type="submit"] {
width: 100%;
height: 40px;
background: #FFD100;
border-radius: 5px;
box-shadow: 0 5px 0 #A58B1E;
border: none;
font-size: 20px;
color: #2b2b2b;
cursor: pointer;
position: relative;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
input[type="submit"]:active, input[type="submit"]:focus {
box-shadow: 0 3px 0 #A58B1E;
top: 2px;
outline: none;
}
Everything look great except, when I checked the site on my iphone. Since my client wanted a responsive website I figured this button I made would look great on every device.
Oh boy, I was so wrong because on my iphone the button is truly hideous. I am including an image to what the mobile view looks like and the url to the site.
Any ideas why this is happening or how I can override it?
Solution
You might be looking for:
-webkit-appearance: none;
OTHER TIPS
You need to use -webkit-appearance:none
in your button.
Also, if you have round corners at input fields you can use the following CSS:
input {
-webkit-border-radius:0;
}