如何更改AfterShip按钮的css？

Question

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

在这里你可以看到按钮
https://www.aftership.com/features/track-button

任何想法的默认视图？

Answer 1

您无法操作iframe。如果我处于你的位置，并且改变按钮样式是必须的，那么我会“欺骗”自己的方式，将你想要的样式放在一个html框中（隐藏它）。然后，您可以将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>