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

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，但它只会影响我正在输入的 CSS，但不会影响下拉建议。

非常感谢任何帮助。

Answer 1

查看文档：Style the Autocomplete and SearchBox widgets

使列表字体为 35px：

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

proof of concept fiddle

.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;"