-webkit-appearance: none; not working for button

user_5750005 0
Viewed 17290

Using contact forms 7 on my Wordpress site development and I noticed the buttons were different for mobile devices, so after searching I found the solution of -webkit-appearance: none; which I applied to the element input.wpcf7-form-control.wpcf7-submit.

The style has been applied because it shows up when I inspect the element, but nothing has changed on mobile devices.

Should I have applied it to a different element?

contact-form-7 wordpress css
2 Answers

You should try this code instead :

input.wpcf7-form-control.wpcf7-submit {
   -webkit-appearance: none;
   -moz-appearance:    none;
   appearance:         none;
}

Consider adding !important if it still not working.

user_86203330

sorry for the super late answer. The class seems to be correct indeed. Temani's answer is also a good suggestion for wider browser compatibility. However, sometimes, even being supported by browser like Safari, the use of the prefixed -webkit- has no effect. So, I'm going to give you two answers:

  1. For the case of a submit input -your case-, you can simply give the background and border properties you want and that will overwrite the browsers default css properties. No need of the appearance property. But you will probably need to define each status of the button including :active and :hover
  2. For Check boxes and radio buttons a workaround to the problem is hiding the input with visibility: hidden and using :before and/or :after to create an alternative check or radio which will also need a visibility: visible property. You can use the :checked:before selector to apply different appearances to each status

Note: remember :before and :after associated to an input will only work in Chrome and Safari and only together with the property appearance: none

Hope this helps

user_60336140
Related