我的表单中内置了 Canada Post AddressComplete 工具。它类似于 Google map 自动完成功能，一旦您开始输入地址，它就会在下拉菜单中显示建议。
但是，一旦您选择了地址，邮政编码和城市字段中的文本就会与标签重叠。但是，当我使用谷歌浏览器自动填写表格时，邮政编码和城市字段中的数据显示正常。
如果有帮助，我在下面包含了 Canada Post AddressComplete 的代码，以及两个字段的 HTML。
您可以在 https://donorbox.org/youthminds 查看表格，只需选择任意金额并单击下一步，这将带您进入带有字段的第二页。
截图:https://i.imgur.com/RxewFQ3.png
除了完全隐藏字段标签外，我还没有成功找到解决方案。我尝试了在有关 Chrome 自动填充重叠字段标签的其他问题上找到的 JS 代码，但它们没有用。
加拿大邮政地址填写:
<link rel="stylesheet" type="text/css" href="https://ws1.postescanada-canadapost.ca/css/addresscomplete-2.30.min.css?key=wt22-dj39-nm11-ua29" />
<script type="text/javascript" src="https://ws1.postescanada-canadapost.ca/js/addresscomplete-2.30.min.js?key=wt22-dj39-nm11-ua29"></script>
邮政编码字段 HTML:
<div class="mdl-cell mdl-cell--6-col" id="zip_code_container" style="visibility: visible; position: relative;"><div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-invalid is-upgraded" data-upgraded=",MaterialTextfield"><input class="mdl-textfield__input" data-id="text" required="" maxlength="10" size="10" type="text" name="donation[zip_code]" id="donation_zip_code" autocomplete="off"><label class="mdl-textfield__label" for="donation_zip_code">Postal Code</label></div></div>
城市字段 HTML:
<div class="mdl-cell mdl-cell--6-col"><div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-invalid is-upgraded is-dirty" data-upgraded=",MaterialTextfield"><input class="mdl-textfield__input" data-id="text" required="required" type="text" name="donation[city]" id="donation_city"><label class="mdl-textfield__label" for="donation_city">City</label></div></div>
是否可以使用 Javascript 和/或 CSS 解决重叠问题，或者可以将字段标签更改为显示在字段下方的帮助文本？
表单本身确实支持帮助文本，但只能添加到附加/额外问题，而不是现有字段。
最佳答案
不幸的是，您不能修改下拉样式，因为它是一个 native 浏览器元素，不是 DOM 的一部分。
我的建议是使用 autocomplete="off"属性禁用 html 代码中的自动填充功能:
<input type="text" id="foo" value="bar" autocomplete="off" />
关于javascript - 修复自动填充与字段标签重叠的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56204957/