-webkit-appearance: none; not working for button

Question

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?

Solution 1

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.

Solution 2

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

Comments

[Lucy S.]

Hi, thanks for the reply. When I inspect the element it says 'appearance: none;' is an unknown property name. This works fine for mobile now apart from Chrome on mobile. Safari, Firefox and Opera Mini are fine.

[Temani Afif]

@LucyS. it's normal to get this warning as this property works only on some browser that's why we write 3. each one target a specific browser and the other are invalid in it

[Temani Afif]

@LucyS. it should work on chrome too, can you share your link ?

[Lucy S.]

It is working now, thank you very much for your help!

[Temani Afif]

@LucyS. you're welcome ;) You can read more about why we use the same property in different ways here : stackoverflow.com/questions/18083056/…