Button CSS style not working on iOS

Question

I've created a simple form. However, the button style does not work on iOS (neither in Chrome, nor Safari). Any ideas?

.submit{
    width:100%;
    background:#17AADF;
    color:#fff;
    font-size:12px;
    border:none;
    border-radius:3px;
    padding:16px;
    margin-top:40px;
    cursor:pointer;
}
.submit:hover{
    background:#000;
}

<input type="submit" class="submit" value="Submit" />

I've solved it myself by adding one line of code into css: -webkit-appearance: none; — user3589451, Jun 16 '14 at 07:31
possible duplicate of [Styling input buttons for iPad and iPhone](http://stackoverflow.com/questions/5449412/styling-input-buttons-for-ipad-and-iphone) — TAS, Jan 23 '15 at 12:26

score 25 · Accepted Answer · answered Jun 16 '14 at 07:47

25

.submit { -webkit-appearance: none; }

jsfiddle : demo

answered Jun 16 '14 at 07:47

Sandeep Sharma

496
6
14

2

To target Firefox for iOS (or any OS really) use `-moz-appearance: none`. – alekosot Jan 14 '16 at 11:04

score 2 · Answer 2 · answered Oct 18 '17 at 06:27

2

Please try this code

input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

it will help

answered Oct 18 '17 at 06:27

subindas pm

2,668
25
18

score 0 · Answer 3 · answered Jan 12 '22 at 14:05

I tried the above with no luck, by itself, the

input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

is important but did not work.

Then I stumbled across this piece of code

window.onload = function() {
    if(/iP(hone|ad)/.test(window.navigator.userAgent)) {
        document.body.addEventListener('touchstart', function() {}, false);
    }
}

Once that script was included, along with using pseudo element

:active

the CSS to change buttons on touch worked.

Button CSS style not working on iOS

3 Answers3