5

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?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Lucy S.
  • 185
  • 1
  • 2
  • 11

2 Answers2

4

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.

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • 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. – Lucy S. Nov 05 '17 at 22:26
  • @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 Nov 05 '17 at 22:28
  • @LucyS. it should work on chrome too, can you share your link ? – Temani Afif Nov 05 '17 at 22:29
  • It is working now, thank you very much for your help! – Lucy S. Nov 05 '17 at 22:29
  • @LucyS. you're welcome ;) You can read more about why we use the same property in different ways here : https://stackoverflow.com/questions/18083056/css-what-are-moz-and-webkit – Temani Afif Nov 05 '17 at 22:31
3

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

Daniel Abril
  • 418
  • 3
  • 11