Style Website Input Buttons Consistently

Some WordPress website themes style their input buttons so that they inherit the browser styles in iOS. The buttons will be rounded with a gradient as the top button above. If you see this with your theme, but you prefer your own button styles like the bottom button, you will need to add a line of CSS to your button styles.

Sometimes you may even find CSS that was added to make sure that the iOS button styles are used:

 -webkit-appearance: button;

Let’s get started.  Search in your style.css below the Reset section for input[type=”submit”], input[type=”button”], and/or button. Then you can add

 -webkit-appearance: none;

to the CSS that already exists.

Remember you need to edit either a child style.css, or you need to add styles with a Custom CSS editor like the one in Jetpack.

If you use a Custom CSS editor you can add this new section:

input[type="submit"],
input[type="button"],
button {
     -webkit-appearance: none;
}