Currently, I am in the process of developing a private framework to replicate the iOS UI using CSS 3 and HTML 5. Most of the widgets have been created, including various colored gradient buttons, but faced with challenges when attempting to incorporate a blue gradient for a button click.
I experimented with different examples such as button:focus, button:active, button:hover without success. When clicking the button in Mobile WebKit, it consistently displays the default grey box. Any assistance or guidance would be greatly appreciated.
My goal is to achieve the following effect:
div.inner button:active {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(173,182,211,1)), color-stop(1%,rgba(143,155,205,1)), color-stop(50%,rgba(48,74,184,1)), color-stop(51%,rgba(22,49,164,1)), color-stop(100%,rgba(41,89,165,1)));
background: -webkit-linear-gradient(top, rgba(173,182,211,1) 0%,rgba(143,155,205,1) 1%,rgba(48,74,184,1) 50%,rgba(22,49,164,1) 51%,rgba(41,89,165,1) 100%);
color: #fff;
text-shadow: 0 -1px 1px rgba(0,0,0,0.8);
outline: none;
-webkit-appearance: none;
}
I also attempted to apply the class to the button upon 'click' using jQuery, but encountered the same outcome. So, my question remains - what is the correct pseudo-class name for when a user taps an element in Mobile WebKit?