Clever Geek Handbook

IOS html5 css3 button click style

I am writing my application in HTML5 / CSS3 / JavaScript. For my button, I create a style (everything works fine in the browser), but when I launch my app on the iPad, my active effect overrides the standard iOS click. How can I override this default effect?

My style:

<style type="text/css">    
.button {
display: inline-block;
width: 150px;
height: 50px;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}

.button:ACTIVE {
background: #f47c20;
background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015) );
background: -moz-linear-gradient(top, #f88e11, #f06015);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015' );
}

My button:

<a href="#" class="button"></a>
+3


source to share


2 answers


The answer to your problem, in my opinion, is very simple.

Add this CSS code to your tag or body tag (to affect the whole document).

body { -webkit-appearance: none; }


This will remove the default styles for buttons that iOS places on certain UI elements.

Hope it helps.

+4


source


I had the same problem as the button tag and it seems to override.



<button class="button"><a href="#go">Link</a></button>
0


source






More articles:


All Articles