是否有办法在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可以做什么和不能做什么都非常严格...
Use this webkit
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
对我有用的是在按钮的CSS中添加背景色。就我而言,我使用的是黑色按钮样式。