如何让按钮具有相同的设计？

Question

目前，我网站上的所有按钮都具有相同的设计（圆形，屏幕截图中的版本 2）。但是，我在我的网站上实现了一个 iframe（数据来自外部链接），其中包含不同样式的按钮（方形，屏幕截图中的版本 1）。有没有办法将按钮的样式从 iframe 更改为与我的按钮完全相同的样式？ （例如，通过自定义 CSS？）

按钮之间的唯一区别如下：

• 圆形与方形
• 文本粗细

*胡佛效果是相同的。

屏幕截图： https://i.sstatic.net/Tz4AX.jpg

注意：网站是基于 WordPress 构建的& Elementor（最新版本）。

Answer 1

如果无法修改 iframe 的源代码，则需要使用 javascript 来附加您自己的样式表：

<script>
  var yourCssFileWithRoundedButtons = "path/style.css";
  var yourIFrameId = "MyIFrame"


  var cssLink = document.createElement("link");
  cssLink.rel = "stylesheet"; 
  cssLink.type = "text/css"; 
  cssLink.href = yourCssFileWithRoundedButtons; 
  frames[yourIFrameId].document.head.appendChild(cssLink);
</script>

请记住，您可能会与该外部页面的 css 发生冲突，并且您可能必须在选择器中非常具体才能通过更改