如何在Safari呈现的Apple Pay按钮上弄圆角?

问题描述 投票:0回答:2

是否有办法在Safari呈现的Apple Pay按钮上设置圆角(使用-webkit-appearance: -apple-pay-button

我知道Apple对使用Apple Pay按钮可以做什么和不能做什么非常严格,但是它们specifically say that you should adjust the corner radius to match the appearance of other buttons

您可以更改拐角半径以产生带有方形拐角的按钮或药丸形的按钮。

现在,我所有的按钮都是药丸状的,所以我想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>

是否有办法在Safari呈现的Apple Pay按钮上设置圆角(使用-webkit-appearance:-apple-pay-button?我知道Apple对于使用Apple Pay可以做什么和不能做什么都非常严格...

html css safari applepay
2个回答
0
投票
Use this webkit


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

0
投票

对我有用的是在按钮的CSS中添加背景色。就我而言,我使用的是黑色按钮样式。

© www.soinside.com 2019 - 2024. All rights reserved.