Question

我在我的网站上获得了一个字体测验的链接，使用他们提供的代码给出了说明：http://helpcenter.typeform.com/hc/en-us/articles/200065866-Overview-of-embedding-options（我使用从侧面滑出的弹出式抽屉式）

我想在链接上使用我的css样式来匹配我的网站的其余部分，但更改类似乎打破了一些东西。当我将链接上的类更改为

如何在不丢失功能的情况下更改按钮的外观？

这里是我使用typeform类，typeform + mine和我自己的样子时的样子： http://i.imgur.com/scOdjqc.png

以下是代码：

<a 
    class="typeform-share"
    href="https://mysite.typeform.com/to/url"
    data-mode="2"
    target="_blank">
        Take quiz now!
</a>
<script>
(function(){var qs,js,q,s,d=document,gi=d.getElementById,ce=d.createElement,gt=d.getElementsByTagName,id='typef_orm',b='https://s3-eu-west-1.amazonaws.com/share.typeform.com/';if(!gi.call(d,id)){js=ce.call(d,'script');js.id=id;js.src=b+'share.js';q=gt.call(d,'script')[0];q.parentNode.insertBefore(js,q)}id=id+'_';if(!gi.call(d,id)){qs=ce.call(d,'link');qs.rel='stylesheet';qs.id=id;qs.href=b+'share-button.css';s=gt.call(d,'head')[0];s.appendChild(qs,s)}})()
</script>

编辑：添加了显示我在上课时会发生什么的图像。

Answer 1

您应该能够添加自己的类，然后覆盖通过自动包含的https://s3-eu-west-1.amazonaws.com/share.typeform.com/share-button.css样式表设置的样式。

或者，您可以将脚本更改为不包含链接的默认样式表，方法是删除（从缩小且不可能读取的脚本）if(!gi.call(d,id)){qs=ce.call(d,'link');qs.rel='stylesheet';qs.id=id;qs.href=b+'share-button.css';s=gt.call(d,'head')[0];s.appendChild(qs,s)}，这样您的嵌入代码最终会像这样代替：

(function(){var qs,js,q,s,d=document,gi=d.getElementById,ce=d.createElement,gt=d.getElementsByTagName,id='typef_orm',b='https://s3-eu-west-1.amazonaws.com/share.typeform.com/';if(!gi.call(d,id)){js=ce.call(d,'script');js.id=id;js.src=b+'share.js';q=gt.call(d,'script')[0];q.parentNode.insertBefore(js,q)}id=id+'_';})()

Answer 2

另一种方法是使用他们的链接（而非按钮）代码，并用图像替换锚标签之间的文本。从编码的角度来看并不优雅，但似乎有效。

Answer 3

执行以下操作：将脚本更改为此

<script>(function(){var qs,js,q,s,d=document,gi=d.getElementById,ce=d.createElement,gt=d.getElementsByTagName,id='typef_orm',b='https://s3-eu-west-1.amazonaws.com/share.typeform.com/';if(!gi.call(d,id)){js=ce.call(d,'script');js.id=id;js.src=b+'share.js';q=gt.call(d,'script')[0];q.parentNode.insertBefore(js,q)}id=id+'_';})()</script>

在CSS中添加一个按钮类，将按钮的类保持为 class =“typeform-share button”

如何在保持其功能的同时更改字体按钮的外观？

3 个答案: