是否可以在搜索栏中设置搜索建议的样式?如何通过css调用它? [英] Is it possible to style the search suggestions in a searchbar? How does one call it through css?

问题描述

我目前在一个 RoR 网站上工作.我有一个搜索栏，用户可以在其中输入——但是，搜索栏中的建议似乎来自基于互联网历史的最近搜索.有没有办法设置搜索建议的样式?我希望搜索建议的背景是透明的.但是我似乎无法通过 css 访问下拉列表.这是我的 HTML:

I'm currently working on a RoR website. I have a search bar wherein the user can input--however, the suggestions in the searchbar seem to come from recent searches based on internet history. Is there a way to style the search suggestions? I want the background of the search suggestions to be transparent. However I cannot seem to access the dropdown through css. Here's my HTML:

  <form action="/search">
   <input name="search_query" class="lanSearch" placeholder="" size="14" autofocus="autofocus"><br>
   <input type="submit" value="Submit" class="hide"/>
  </form>

这是我的 css:

.lanSearch{
    background-color: transparent;
    font-size: 5vw;
    color:white;
    border:0;
    border-bottom:solid 3px white;
    margin-top: 2vh;
}

推荐答案

你不能设置内部自动完成的样式，但是你可以在一些 CSS 和 JS 的帮助下创建一个完全自定义的搜索建议/自动完成处理并禁用内部的:

You cannot style the internal autocomplete, but you can create an entirely custom search suggestions / autocomplete handling with the help of some CSS and JS and disable the internal one with:

<input type="text" name="foo" autocomplete="off">

这篇关于是否可以在搜索栏中设置搜索建议的样式?如何通过css调用它?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！