如何将css添加到angular2中的下拉列表中

时间:2017-10-17 11:56:13

标签: html css angular

如何在angularjs2 preview here

中为下拉列表添加CSS

HTML

<h1> <label>Cameras:</label> <h1> 
<select [(ngModel)]="selectedCountry.id" (change)="onSelect($event.target.value)"> 
  <option value="0">--Select--</option> 
  <option *ngFor="#country of countries" value= {{country.id}}>{{country.name}}</option> 
</select> 
<br/><br/> 
<div> 
  <label>URI:</label>
  <br/> 
  <select> 
    <option *ngIf='selectedCountry.id == 0' value="0">--Select--</option> 
    <option *ngFor="#state of states " value= {{state.id}}>{{state.name}}</option> 
  </select> 
</div> 
<br/> 
<button class="button">StartRecording</button> 
<button class="button">Stop Recording</button>

CSS

.dropdown { float: left; overflow: hidden; } 
.dropdown .dropbtn { 
  font-size: 16px; 
  border: none; 
  outline: none; 
  color: white; 
  padding: 14px 16px; 
  background-color: inherit; 
} 
.navbar a:hover, .dropdown:hover .dropbtn { background-color: red; } 
.dropdown-content { 
  display: none; 
  position: absolute; 
  background-color: #f9f9f9; 
  min-width: 160px; 
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
  z-index: 1; 
}

OP应该在这里添加更多信息。他在评论中提到他想要dropdown

的一些样式

0 个答案:

没有答案