Question

使用此Q http://stackoverflow.com/questions/17838380/styling-jquery-ui-autocomplete

我能够在我的网站上设置所有自动完成的样式。但是，我只想将WIDTH样式应用于一个特定的自动完成文本字段。

        <script>
  $( function() {
    var availableCountries = [   
 "Country1",
    "Country2",
    "Country3",
    ];
    $("#tbCountries").autocomplete({
      source: availableCountries
    });
  } );
  </script>



<input id="tbCountries" type="text" class="textEntry form-control RegistrationPage-AutoCompleteCountryWidth" maxlength="30">

我尝试通过输入的ID访问它并添加一个类

#tbCountries ul
{
     width:14% !important;
}

.RegistrationPage-AutoCompleteCountryWidth ul
{
   width:14% !important;
}

这些都不起作用......但是......通过从开发人员工具中获取ul的ID，我可以将所需的宽度更改为

#ui-id-1
{
    width:14% !important; WORKING
}

然而，不是这个糟糕的编码，可以这么说，从我的网站添加或删除更多自动完成可能会改变这个的ID？

任何想法？ TA

Answer 1

您尝试选择ul元素作为输入的子元素。在CSS中，您可以选择元素的子元素，在选择器之间有空格。

尝试这样做（只是不带ul子选择器的ID）：

#tbCountries {
     width:14% !important;
}

进一步阅读： https://css-tricks.com/child-and-sibling-selectors/

仅在现场更改一个自动完成的样式

1 个答案: