If you define a style for a button :hover
, the button click on the IPhone is a hover state, then click once hover state will disappear, this is not what we want, and then want to define :active
the style to achieve the effect of button press, but the definition of the active style on the iphone No effect when clicked
Just add a section of JS:
Document. AddEventListener("Touchstart", function() {},false);
Another option that can be added on the bodyontouchstart=""
<body ontouchstart="">
Principle: Safari Disables the style of the element by default active
, and we touchstart
can make the style reactivate by overwriting the default event by declaring it active
.
In addition, the default click button will have a gray frame, through which the CSS can be cleared:
html {-webkit-tap-highlight-color: rgba(0,0,0,0);}
How to define an active style for CSS on IPhone