Enable custom submit button styling in Safari mobile

If you want to style a form submit button with custom size and border radius you have to “nullify” the default Safari mobile style, since differently it will be somehow “unrewritable”. I discovered that there is an handy CSS property called “appearance” which is used for native-style display of elements. With this property is possible to display special search box, cursors and so on… the reference for Safari can be found here, that one for Mozilla can be found here.
In order to remove native style is possible to set “appearance” to none, thus to enable complete custom styling of our submit buttons we can write the following CSS statement:

   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;  

Some notes:
– vendors-specific declarations (-webkit, -moz) may be removed
– do not reset appearance for all the HTML elements (ie: “*”) or you will have to work hard to restyling complex components like select!

  • René

    Thanks a lot!!! That’s exactly I searched for!!!!

  • Antonio

    Great trick, thanks!!!

  • Hi There!
    good post but to be complete, u should also set border radius to 0, otherwise on ipad, the button is styled with rounded borders… so, if you want, please add following css rules to have a complete coverage ;)

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;  
    /*added no border rounding*/
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
  • Alexandra

    THANK YOU!!!

  • Mike Sinkula