In some versions of Safari, the: Active pseudo-class does not take effect, you can hack through CSS and JS two ways:
Html
<class= "button"> I should turn red when I click </ div>
Css
. Button{Display:Block;width:200px;Height:40px;Margin-top:10px;Border-radius:6px;Border:1px solid #ccc;Line-height:40px;text-align:Center; }. Button:active,
. button.active//This was for JS hack
{Background-color:Red;cursor:pointer;/*mind Add This line to make your work easy*/}
Javascript
document.addeventlistener (' domcontentloaded ', function () {
//we would add the. Active class the elements which has a. Button class Document.body.addEventListener ( ' t Ouchstart ', function (Eve) { if (eve.target.classList.contains (' button ' ' active ' ); } });
//remove the. Active when you finish the Touch event Document.body.addEventListener ( ' touchend ', function (Eve) { if ( Eve.target.classList.contains (' button ' ' act Ive ' ); } }); });
Online Demo
JS Bin on jsbin.com
Let your: active work well