Question

我需要自定义预先输出结果的外观。有哪些css选择器可以选择容器和物品？我在Angular UI文档和Bootstrap文档中也找不到任何信息。

你可以阅读here，Bootstrap自动生成以下html：

<ul class="typeahead dropdown-menu">
    ...
    <li><a href="#">MATCHING RESULT</a></li>
    ...
</ul>

但是，在CSS中指定类.typeahead不起作用。

谢谢。

Answer 1

从Angular UI demo page开始，HTML输出似乎是（修剪了很多看似没用的东西）：

<ul class="dropdown-menu ng-isolate-scope" role="listbox" typeahead-popup="" matches="matches">
    <li class="ng-scope">
        <a tabindex="-1" class="ng-scope ng-binding">Element 1</a>
    </li>
    <li class="ng-scope active">
        <a tabindex="-1" class="ng-scope ng-binding">Element 2</a>
    </li>
    <li class="ng-scope">
        <a tabindex="-1" class="ng-scope ng-binding">Element 3</a>
    </li>
</ul>

因此，您可以更改所有.dropdown-menu项目的外观，或者最好将您的预先包装在其自己的div中。

<div class="custom-typeahead">
    <input type="text">
</div>

使用这样的CSS。

整个下拉列表：

.custom-typeahead .dropdown-menu {
    background-color: red;
}

下拉列表中的单个项目：

.custom-typeahead .dropdown-menu li {
    border: 1px solid green;
}

下拉列表中的主动选择项目：

.custom-typeahead .dropdown-menu li.active {
    font-size: 20px;
}

Angular Bootstrap Typeahead外观

1 个答案: