CSS 您如何设计 Google Places Autocomplete API 上的下拉菜单？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7893857/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you style the dropdown on Google Places Autocomplete API?
提问by Oskar Smith
We need to tweak the styling of the dropdown that shows the autocomplete place suggestions when using the Google Places/Maps Autocomplete API.
在使用 Google Places/Maps Autocomplete API 时，我们需要调整显示自动完成位置建议的下拉列表的样式。
Does anyone know if this is even possible? If so, I guess we just need to know the CSS classnames/IDs.
有谁知道这是否可能？如果是这样，我想我们只需要知道 CSS 类名/ID。
There's a screen grab of the bit I am referring to here:
我在这里指的是一个屏幕截图：
采纳答案by DeyyyFF
If you use firebug (as mentioned in a comment to your question...) you see that the container with the autocomplete results is a DIV with the class "pac-container" and the suggestions are inside it as a DIV with the class "pac-item". so just style with CSS.
如果您使用萤火虫（如对您的问题的评论中所述...），您会看到具有自动完成结果的容器是一个带有“pac-container”类的 DIV，并且建议在其中作为带有类“的 DIV” pac 项目”。所以只需使用 CSS 样式即可。
回答by User
回答by Brett Pennings
This CSS will allow the drop-down to resize to fit the width of the results:
这个 CSS 将允许下拉菜单调整大小以适应结果的宽度：
.pac-container, .pac-item {
width: inherit !important;
}
回答by apebeast
I case anyone is interested in the hierarchy I was able to scrape the following using Firebug:
如果有人对我能够使用以下内容抓取的层次结构感兴趣Firebug：
<div class="pac-container pac-logo" style="width: 557px; position: absolute; left: 66px; top: 106px; display: none;">
<div class="pac-item">
<span class="pac-icon pac-icon-marker"></span>
<span class="pac-item-query">
<span>France</span>
</span>
</div>
<div>
回答by Deepak Kamat
It is pretty difficult to inspect the elements since it closes as soon as it loses focus.
检查元素非常困难，因为它一旦失去焦点就会关闭。
Though we know that the container has the .pac-containerclass and items have .pac-item, upon further investigating the API I found that it embeds the CSS styles in the document.
虽然我们知道容器有.pac-containerclass 和 items .pac-item，但在进一步调查 API 后，我发现它在文档中嵌入了 CSS 样式。
Here's what initially there, so use it to change the pre-defined styles to fit your needs.
这是最初的内容，因此请使用它来更改预定义的样式以满足您的需求。
.pac-container {
background-color: #fff;
position: absolute!important;
z-index: 1000;
border-radius: 2px;
border-top: 1px solid #d9d9d9;
font-family: Arial, sans-serif;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden
}
.pac-logo:after {
content: "";
padding: 1px 1px 1px 0;
height: 16px;
text-align: right;
display: block;
background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/powered-by-google-on-white3.png);
background-position: right;
background-repeat: no-repeat;
background-size: 120px 14px
}
.hdpi.pac-logo:after {
background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/powered-by-google-on-white3_hdpi.png)
}
.pac-item {
cursor: default;
padding: 0 4px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
line-height: 30px;
text-align: left;
border-top: 1px solid #e6e6e6;
font-size: 11px;
color: #999
}
.pac-item:hover {
background-color: #fafafa
}
.pac-item-selected,
.pac-item-selected:hover {
background-color: #ebf2fe
}
.pac-matched {
font-weight: 700
}
.pac-item-query {
font-size: 13px;
padding-right: 3px;
color: #000
}
.pac-icon {
width: 15px;
height: 20px;
margin-right: 7px;
margin-top: 6px;
display: inline-block;
vertical-align: top;
background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/autocomplete-icons.png);
background-size: 34px
}
.hdpi .pac-icon {
background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/autocomplete-icons_hdpi.png)
}
.pac-icon-search {
background-position: -1px -1px
}
.pac-item-selected .pac-icon-search {
background-position: -18px -1px
}
.pac-icon-marker {
background-position: -1px -161px
}
.pac-item-selected .pac-icon-marker {
background-position: -18px -161px
}
.pac-placeholder {
color: gray
}
回答by Hyman Franzen
This worked for me, and now I can run this on mobile!
这对我有用，现在我可以在移动设备上运行它！
.pac-container {
z-index: 10000 !important;
width: auto !important;
position: initial !important;
left: 0 !important;
right: 0 !important;
display: block !important;
}
.pac-container:empty{
display: none !important;
}
And this somewhere!
而这在某个地方！
$('selector').append('.pac-container');
$('selector').append('.pac-container');
Now the results will show in the selected div as a normal block element :)
现在结果将在选定的 div 中显示为一个普通的块元素:)
