[英]DropDown Input Using HTML5 and CSS3
I am trying to create an input drop down that should look like this: [![enter image description here][1]][1] When it drops down it should look like this: 我正在尝试创建一个输入下拉列表,如下所示:[![在此输入图像描述] [1]] [1]当它下降时,它应如下所示:
Right now my drop down looks like this:
现在我的下拉看起来像这样:
In my drop down ,drop down button is not highlighted in blue. 在我的下拉菜单中,下拉按钮不会以蓝色突出显示。 I am not sure how I can get the dropdown button inside the input.
我不知道如何在输入中获得下拉按钮。
My HTML: 我的HTML:
<input #input type="text" class="form-control input-list tn-input-list" [(ngModel)]="query" (keyup)="filter($event)">
<button class="button-list tn-button-list" (click)="showAll(input)">
<span class="tn icon-icon_Dropdown_Arrow icon-padding"></span>
</button>
<ul id="list-group" class="list-group group-list tn-group-list" *ngIf="filteredList.length > 0">
<li *ngFor="let item of filteredList" [class.active]="item.selected" [id]="item.selected" class="list-group-item item-list tn-item-list" (click)="select(item)">
{{ item.name }}
</li>
</ul>
My CSS: 我的CSS:
.tn-input-list {
width:95%;
float: left;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
.tn-button-list {
float:left;
height: 34px;
width: 5%;
}
.tn-button-list i {
margin-top: -5px;
}
.tn-group-list {
max-height: 411px;
overflow: auto;
float: left;
width: 95%;
border-bottom: 1px solid #ddd;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.tn-item-list {
cursor: pointer;
}
.tn-item-list:hover {
background: #f5f5f5;
}
.tn-item-list:first-child {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
Please note: I can only use bootstrap and custom styles. 请注意:我只能使用自举和自定义样式。 (I need the dropdown button to get highlighted along with the input box.)
(我需要下拉按钮以及输入框突出显示。)
To bring back the button in you input box you can add this css part: 要在您输入框中带回按钮,您可以添加此css部分:
.tn-button-list {
transform: translateX(-100%);
background-color: transparent;
border: none;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.