css - 如何更改 AfterShip 按钮的 CSS？

Question

我使用 AfterShip button 按钮，我想更改默认的 css，服务给了我一个 iframe，我可以更改这些 css 设置吗？

这里可以看到按钮的默认 View
https://www.aftership.com/features/track-button

有什么想法吗？

Answer 1

您无法操纵 iframe。如果我处于你的位置并且必须更改按钮样式，我会“欺骗”我的方式将一个 html 框放置在 iframe 按钮上方(隐藏它)你想要的样式。然后您可以将 pointer-events:none 添加到您的元素，这样下面的 iframe 按钮就可以点击了。

这里有一个 iframe 示例:

#as-container-150399376720884 {
  position:relative;
}
.myButton {
  height:48px;
  width:126px;
  background-color:red;
  color:#fff;
  text-align:center;
  line-height:48px;
  pointer-events:none;
  position:absolute;
  left: 375px;
  top: 0px;  
}

<div id="as-container-150399376720884" style="width: 100%; height: 64px;">
  <iframe id="as-150399376720884" frameborder="0" scrolling="no" src="https://button.aftership.com/button_widget.html?&amp;size=large&amp;id=150399376720884&amp;slug=&amp;width=500px&amp;hide_tracking_number=false&amp;tracking_number=&amp;responsive=true&amp;origin=https%3A%2F%2Fwww.aftership.com%2Ffeatures%2Ftrack-button&amp;domain=track.aftership.com"
  style="width: 100%; overflow: hidden; border: 0px; max-width: 500px; height: 64px;"></iframe>
  <div class="myButton">MY button</div>
</div>