如何更改AfterShip按钮的css?
问题描述:
我使用AfterShip按钮按钮,我想更改默认的CSS,该服务给我一个iframe,我可以更改这些CSS设置?如何更改AfterShip按钮的css?
在这里你可以看到按钮
https://www.aftership.com/features/track-button
任何想法的默认视图?
答
您无法操作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?&size=large&id=150399376720884&slug=&width=500px&hide_tracking_number=false&tracking_number=&responsive=true&origin=https%3A%2F%2Fwww.aftership.com%2Ffeatures%2Ftrack-button&domain=track.aftership.com"
style="width: 100%; overflow: hidden; border: 0px; max-width: 500px; height: 64px;"></iframe>
<div class="myButton">MY button</div>
</div>