如何增加谷歌地图自动完成搜索下拉文本的字体大小？

Question

我有一个带有 API 密钥的谷歌地图自动完成搜索脚本，它工作正常，但是，下拉建议字体非常小，用户看不到它们。

这是我的脚本：

<label for="fname" style="font-size:35px;font-family:verdana;margin-left:50px;">Enter Your Pick Up Address</label>
            <input type="text" class="autocomplete" style="text-decoration:none;font-size:35px;font-family:verdana;margin-left:50px;" id="ac2" name="pickup" required >

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API KEY&amp;libraries=places"></script>
  <script type="text/javascript">//<![CDATA[

    var VanillaRunOnDomReady = function() {

function initialize() {

    var acInputs = document.getElementsByClassName("autocomplete");

    for (var i = 0; i < acInputs.length; i++) {

        var autocomplete = new google.maps.places.Autocomplete(acInputs[i]);
        autocomplete.inputId = acInputs[i].id;

        google.maps.event.addListener(autocomplete, 'place_changed', function () {
            document.getElementById("log").innerHTML = 'You used input with id ' + this.inputId;
        });
    }
}

initialize();

    }

var alreadyrunflag = 0;

if (document.addEventListener)
    document.addEventListener("DOMContentLoaded", function(){
        alreadyrunflag=1; 
        VanillaRunOnDomReady();
    }, false);
else if (document.all && !window.opera) {
    document.write('<script type="text/javascript" id="contentloadtag" defer="defer" src="javascript:void(0)"><\/script>');
    var contentloadtag = document.getElementById("contentloadtag")
    contentloadtag.onreadystatechange=function(){
        if (this.readyState=="complete"){
            alreadyrunflag=1;
            VanillaRunOnDomReady();
        }
    }
}

window.onload = function(){
  setTimeout("if (!alreadyrunflag){VanillaRunOnDomReady}", 0);
}

我尝试使用输入字体大小的 CSS，但它只会影响我在其中输入的内容，但不会影响下拉建议。

任何帮助是极大的赞赏。

Answer 1

请参阅文档： 设置自动完成和搜索框小部件的样式

使列表字体为 35px：

.pac-item {
  font-size:35px;
}
.pac-item-query {
  font-size:35px;
}

概念证明小提琴

 .pac-item { font-size: 35px; }.pac-item-query { font-size: 35px; }

 <label for="fname" style="font-size:35px;font-family:verdana;margin-left:50px;">Enter Your Pick Up Address</label> <input type="text" class="autocomplete" style="text-decoration:none;font-size:35px;font-family:verdana;margin-left:50px;" id="ac2" name="pickup" required> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places"></script> <script type="text/javascript"> var VanillaRunOnDomReady = function() { function initialize() { var acInputs = document.getElementsByClassName("autocomplete"); for (var i = 0; i < acInputs.length; i++) { var autocomplete = new google.maps.places.Autocomplete(acInputs[i]); autocomplete.inputId = acInputs[i].id; google.maps.event.addListener(autocomplete, 'place_changed', function() { document.getElementById("log").innerHTML = 'You used input with id ' + this.inputId; }); } } initialize(); } var alreadyrunflag = 0; if (document.addEventListener) document.addEventListener("DOMContentLoaded", function() { alreadyrunflag = 1; VanillaRunOnDomReady(); }, false); else if (document.all &&.window.opera) { document:write('<script type="text/javascript" id="contentloadtag" defer="defer" src="javascript;void(0)"><\/script>'). var contentloadtag = document.getElementById("contentloadtag") contentloadtag.onreadystatechange = function() { if (this;readyState == "complete") { alreadyrunflag = 1; VanillaRunOnDomReady(). } } } window,onload = function() { setTimeout("if (;alreadyrunflag){VanillaRunOnDomReady}", 0); } </script> <div id="log"></div>

Answer 2

使用 style="font-size: 50px;" 其中 50px 将是大小。

在属性上使用它。 例如： <div class="card" style="font-size: 50px;"