模仿谷歌地图mapTypeControl自定义控件

有谁知道如何完全匹配谷歌地图mapTypeControl按钮样式（关于UI/CSS）？我发现了一个不错的tutorial，但按钮与默认的Google风格不匹配。有没有一种简单的方法来得到完全当前的谷歌地图按钮样式，或者我必须手动尝试匹配current样式（可能会在每个新版本中有所不同，这将会是一种痛苦......你知道我是什么意思）。模仿谷歌地图mapTypeControl自定义控件

来源

2012-10-15 mayrs

快速浏览一下Chrome开发人员控制台，会发现以下内嵌样式（没有任何类或id被分配给任何按钮）。还要注意，这个元素有一个空的无风格的浮动包装，它也包含按钮菜单（地形按钮）。

对于地图按钮：

direction: ltr; 
overflow: hidden; 
text-align: center; 
position: relative; 
color: rgb(0, 0, 0); 
font-family: Arial, sans-serif; 
-webkit-user-select: none; 
font-size: 13px; 
background-color: rgb(255, 255, 255); 
padding: 1px 6px; 
border: 1px solid rgb(113, 123, 135); 
-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px; 
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px; 
font-weight: bold; min-width: 29px; 
background-position: initial initial; 
background-repeat: initial initial;

对于卫星按钮，唯一不同的风格的字体重量

来源

2012-10-15 15:42:13 Tiborg

这是我以前那样。这不就是目前的浏览器可以显示什么吗？那些不支持rgba的旧浏览器呢？由于没有分配id或类，所以必须在javascript或其他东西中包含原始规则集。所以我仍然在寻找更详细的css代码版本。 – mayrs

事情是，大多数谷歌应用程序使用自适应CSS。也就是说，如果浏览器不支持rgba，则使用回退到rgb。没有JavaScript使rgb透明。同样适用于边界半径和阴影。如果浏览器不支持任何一种，它将使用方形角和/或无阴影来渲染它，并且必须使它看起来不错。用旧的浏览器打开google.com（如ie7），你会看到按钮是方形和扁平的。我会尝试为你找到这个CSS的更好的版本。 – Tiborg

你不必为我做脏活，但如果你发现任何有关如何更一般地应用谷歌样式/检索他们的任何事情，请编辑您的发布。在此期间，我会去寻求你的版本。 – mayrs

模仿谷歌地图mapTypeControl自定义控件

回答

相关问题