离子：使用CSS自动完成边框

Question

我正在尝试使用CSS在我的离子代码中对自动完成标记应用border。所以我有这个：

<div class="list list-inset">
<autocomplete attr-placeholder="type here to search..."></autocomplete>
</div>

然后这是我的css代码

<style type="text/css">
autocomplete {
    border: 1px solid #151b54;
}
</style>

挑战在于边框永远不会应用于自动完成。 请问有什么不对？

Answer 1

我不确切知道您使用的是哪种指令，但问题是标记<autocomplete>是directive，其中包含更多html代码。如果您在桌面浏览器中检查运行应用程序的html，您可以看到里面有标签。 可能你想将边框应用于输入标签，所以... css可能是这样的：

autocomplete input{
    border: 1px solid #151b54;
}

Answer 2

由于<autocomplete标记内部转换为标准HTML，我会在<autocomplete标记中添加一个类，如下所示：

<autocomplete class="autocomplete-with-border" attr-placeholder="..."></autocomplete>

然后在CSS中：

.autocomplete-with-border input {
    border: 1px solid #151b54;
}

另一种选择是围绕<autocomplete

围绕<div class="autocomplete-with-border">标记