模仿谷歌地圖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自定義控件

回答

相關問題