Closed. This question needs to be more focused。它当前不接受答案。
想改善这个问题吗?更新问题,使其仅通过editing this post专注于一个问题。
3年前关闭。
我想在我的HTML页面中创建自定义搜索输入。
html代码:
我希望该列表始终关闭,但仅在用户单击输入或更改其值时才打开它。我希望将元素固定在输入下方,如下所示:
但不移动页面上的任何其他元素。
我不想添加任何库,但自己做。
如何通过CSS做到这一点?
如果是,只需更改
编辑:
如果只在用户单击输入时才显示
请参阅此处以获取更多信息:CSS Selector Reference | CSS element+element Selector
想改善这个问题吗?更新问题,使其仅通过editing this post专注于一个问题。
3年前关闭。
我想在我的HTML页面中创建自定义搜索输入。
html代码:
<input type="text" class="form-control"/>
<ul class="list-group">
<li class="list-group-item" ng-repeat="item in list track by $index">{{item}}</li>
</ul>
我希望该列表始终关闭,但仅在用户单击输入或更改其值时才打开它。我希望将元素固定在输入下方,如下所示:
但不移动页面上的任何其他元素。
我不想添加任何库,但自己做。
如何通过CSS做到这一点?
最佳答案
这是您要搜索的吗?
.list-group {
background-color: white;
display: none;
list-style-type: none;
margin: 0 0 0 10px;
padding: 0;
position: absolute;
width: 150px;
}
.list-group > li {
border-color: gray;
border-image: none;
border-style: solid solid none;
border-width: 1px 1px 0;
padding-left: 5px;
}
.list-group > li:last-child {
border-bottom: 1px solid gray;
}
.form-control:focus + .list-group {
display: block;
}
<input type="text" class="form-control" />
<ul class="list-group">
<li class="list-group-item" ng-repeat="item in list track by $index">a) ...</li>
<li class="list-group-item" ng-repeat="item in list track by $index">b) ...</li>
<li class="list-group-item" ng-repeat="item in list track by $index">c) ...</li>
<li class="list-group-item" ng-repeat="item in list track by $index">d) ...</li>
</ul>
<div id="just_a_sample">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut l</div>
如果是,只需更改
ul
的css。如果要将列表移到右侧,只需在padding-left
中再添加一些像素即可。编辑:
如果只在用户单击输入时才显示
ul
,请尝试使用+
选择器。请参阅此处以获取更多信息:CSS Selector Reference | CSS element+element Selector
关于javascript - 如何将元素列表放置在搜索输入下方,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/41038545/