Как получить закругленные углы на моей отрендеренной Safari кнопке Apple Pay? - PullRequest
Новая
       13

Как получить закругленные углы на моей отрендеренной Safari кнопке Apple Pay?

0 голосов
/ 17 января 2020

Есть ли способ поместить закругленные углы на кнопку Apple Pay, отображаемую в Safari (используя -webkit-appearance: -apple-pay-button)?

Я знаю, что Apple очень строга к тому, что вы можете и не можете делать с кнопками Apple Pay, но они специально говорят, что вы должны отрегулировать радиус угла, чтобы он соответствовал внешнему виду других кнопок :

Вы можете изменить радиус угла, чтобы получить кнопку с квадратными углами или таблетку кнопка

Теперь все мои кнопки имеют форму таблеток, поэтому я думаю, что кнопка Apple Pay должна быть такой же. Тем не менее, я нахожусь в тупике, как это сделать в браузере, поскольку border-radius, кажется, игнорируется для элементов с -webkit-appearance: -apple-pay-button.

Вот пример (который по понятным причинам работает только в Safari ), снимите флажок, чтобы увидеть, какой стиль углов мне нужен: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Apple Pay button test</title>
    <style>
      * {
        font-size: 24px;
      }
      .ap-button {
        border-radius: 1000000px; /* https://stackoverflow.com/a/18795153 */
        display: block;
      }
      input:checked ~ .ap-button {
        color: transparent; /* Hide text */
        -webkit-appearance: -apple-pay-button; /* Make Safari render it specially */
      }
      input:not(:checked) ~ .ap-button {
        border: none;
      }
    </style>
  </head>
  <body>
    <input type="checkbox" checked> Render as Apple Pay button
    <button class="ap-button">
      ? Pay
    </button>
  </body>
</html>

Ответы [ 2 ]

0 голосов
/ 14 февраля 2020

Для меня сработало добавление цвета фона к кнопке css. В моем случае я использовал стиль черной кнопки.

Проверено на iOS 13.3.1 

@supports (-webkit-appearance: -apple-pay-button) { 
    button.apple-pay-button {
        display: inline-block;
        -webkit-appearance: -apple-pay-button;
        background: #000;
        border-radius: 20px;
    }
    .apple-pay-button-black {
        -apple-pay-button-style: black;
    }
}

С уважением,

0 голосов
/ 17 января 2020 
Use this webkit


-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
...