移動WebKit按鈕點擊虛擬類

Question

我目前正在研究一個私人框架來模仿CSS 3和HTML 5中的iOS UI。我創建了大部分小部件，包括衆多彩色漸變按鈕，但我遇到了困難在藍色漸變中添加一個按鈕被點擊。

我試過以下例子：button:focus,button:active,button:hover但似乎沒有任何工作。當點擊Mobile WebKit中的按鈕時，所有我提供的都是默認的灰色框。我想知道有沒有人能指出我正確的方向。

從本質上講，我想這樣做：

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; 
} 

希望是有道理的！我甚至試圖在使用jQuery'點擊'時將該類添加到按鈕中，但又沒有任何反應。我想我的問題是，當用戶點擊移動WebKit中的元素時調用的正確的僞類是什麼？

Answer 1

這爲我們工作？

.button {width: 100%; font-family: Arial; font-size: 12pt; font-weight: bold; color: #ffffff; padding: 10px 20px; margin-bottom: 8px; 
      background: -moz-linear-gradient(top, #a3a3a3 0%, #5b5b5b 30%, #444444 50%, #222222); 
      background: -webkit-gradient(linear, left top, left bottom, from(#a3a3a3), color-stop(0.30, #5b5b5b), color-stop(0.50, #444444), to(#222222)); 
      border-radius: 10px; 
      -moz-border-radius: 10px; 
      -webkit-border-radius: 10px; 
      border: 1px solid #333333; 
      -moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.6); 
      -webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.6); 
      text-shadow: 0px -1px 0px rgba(000,000,000,1), 0px 1px 0px rgba(255,255,255,0.2);} 
.button:active { 
      background: -moz-linear-gradient(top, #838383 0%, #3b3b3b 30%, #242424 50%, #000000); 
      background: -webkit-gradient(linear, left top, left bottom, from(#838383), color-stop(0.30, #3b3b3b), color-stop(0.50, #242424), to(#000000)); 
      border: 1px solid #000000; 
      box-shadow:none; 
      -moz-box-shadow:none; 
      -webkit-box-shadow:none; 
      text-shadow: none;}