How to overcome button’s custom style problem in iOS Devices

Apr 11, 2015, by css

Sometimes we noticed in websites, buttons are not appeared with custom styles in mobile devices.
In Mobile Browsers,Like safari,Chrome the buttons have the native style display. They look different than our styles.
Because every html elements basically have default styles.

Some examples for your clearance :

• Div has Display block
• body tag has margin:8px;
• input has border,outline

That way input[type=”button”] tag has this appearance property.

To overcome this problem in iOS devices,We used CSS property called appearance to set value as “none”.

input[type=’button’]
{
-webkit-appearance: none; /* Chorme & Safari */
-moz-appearance: none; /* Mozhila */
appearance: none;
}

I hope this will be useful to you and enjoy your weekend.