我目前正在开发一个私有(private)框架来模仿 CSS 3 和 HTML 5 中的 iOS 用户界面。我已经创建了大部分小部件,包括许多彩色渐变按钮,但我很难在蓝色渐变按钮中添加一个按钮被点击。
我尝试了以下示例: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“单击”按钮时将类添加到按钮,但再次没有任何反应。我想我的问题是,当用户点击 Mobile WebKit 中的元素时,正确的伪类调用是什么?
最佳答案
这对我们有用...
.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;}
关于jquery - Mobile WebKit按钮点击伪类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7096804/