iphone :active pseudoclass not working in safari

Question

I have a webpage that doesn't display correctly in safari.

The :active pseudoclass (which should turn the button yellow when pressed) doesn't work. Of course it works in any other browser.

Applied this solution, not working: :active pseudo-class doesn't work in mobile safari

Here is my example: https://jsfiddle.net/mt4sf7ov/

button:focus {
-webkit-appearance: none;
border-radius: 0;
background-color: yellow;
font-size: 30px;
padding: 2px 20px;
}

forgot, but anyway doesn't work: https://jsfiddle.net/sqgnh4u1/ — user3922878, Sep 27 '17 at 17:11

score 0 · Answer 1 · answered Sep 27 '17 at 10:50

0

Please placed Styles as below in your css file. button:active {-webkit-appearance: none;border-radius: 0;background-color: red;font-size: 30px;padding: 2px 20px;}

answered Sep 27 '17 at 10:50

Ravi Patel

67
4

still doesn't work! https://jsfiddle.net/sqgnh4u1/ (when clicking it's yellow but when releasing the finger goes back to normal) – user3922878 Sep 27 '17 at 17:09

score 0 · Accepted Answer · answered Sep 28 '17 at 07:11

0

Ok solved, solution can be seen here: http://jsfiddle.net/quo85do3/5/

button:hover{
-webkit-appearance: none;
background:#000;
}

answered Sep 28 '17 at 07:11

user3922878

23
3

iphone :active pseudoclass not working in safari

2 Answers2