调整 Google Cast 按钮的大小和样式 <google-cast-launcher>答案

【问题标题】：Resizing and styling the Google Cast button <google-cast-launcher>调整 Google Cast 按钮的大小和样式 <google-cast-launcher>
【发布时间】：2019-10-06 02:46:27
【问题描述】：

我有一个加载 Cast 应用程序框架的简单页面：

<script src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>

本页关注example for a standard cast button：

<google-cast-launcher></google-cast-launcher>

默认情况下，此按钮很大，会占用页面上的所有空间。所以，我尝试用 CSS 调整它的大小：

google-cast-launcher {
  max-width: 2em;
}

这没有效果。也不会设置显式的height 和width。

文档没有帮助：

您可以根据需要对元素应用任何其他样式，例如大小或位置。

如何设置此按钮的样式？

【问题讨论】：

标签： css chromecast google-cast google-cast-sdk

【解决方案1】：

这对我来说很好。请看下文，谢谢。

google-cast-launcher {

浮动：右；

边距：10px 6px 14px 0px;

宽度：40px；

高度：32px；

不透明度：0.7；

背景色：#000;

边框：无；

大纲：无；

}

google-cast-launcher:hover {

--disconnected-color: white;

--连接颜色：白色；

}

【讨论】：

【解决方案2】：

该元素默认设置为display: inline - 这些元素既没有可用的宽度也没有高度属性。将其设置为display: inline-block 或display: block。

【讨论】：