Мобильный WebKit нажатием кнопки psuedo-class - PullRequest
Новая
       18

Мобильный WebKit нажатием кнопки psuedo-class

0 голосов
/ 17 августа 2011

В настоящее время я работаю над закрытой платформой для имитации пользовательского интерфейса iOS в CSS 3 и HTML 5. Я создал большинство виджетов, включая многочисленные цветные кнопки градиента, но у меня возникают трудности с добавлением кнопки синего градиента нажата.

Я пробовал следующие примеры: 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?

1 Ответ

1 голос
/ 22 августа 2011

Это работает для нас ... 

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