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;
}
Getting all the buttons to be consistent (font, color, hover, size, etc) throughout a website is always a huge pain. Especially when plugin authors are bound and determined to use their own custom css files for their plugin instead of using the child theme css.
I usually just rename the plugin css files so that they are not used and be done with it.
I enjoy your blog posts immensely.
Thank you.
Thank you for your kind words! I agree with you, Marcus. Plugins often use their own styles, instead of the theme styles making styling difficult