primeng大搜索文本框与搜索图标

Question

您好 我是Primeng的新手。我需要创建一个搜索框，如图所示。

我尝试了类似下面的内容，但未获得所需的输出。

<div class="ui-g-12">
  <input type="text" [(ngModel)]="filterCriteria.searchValue"> 
  <a href="#" class="search-icon">
      <i class="fa fa-search" id="myimage" (click)="search()"></i>
  </a>
</div>

任何人都可以帮助如何在primeng中执行此操作吗？

由于

Answer 1

喜欢这个

<form class="search-container">
    <input type="text" id="search-bar" placeholder="What can I help you with today?">
    <a href="#" class="search-icon">
        <i class="fa fa-search"></i>
    </a>
  </form>

<强>的CSS

.search-container{
  width: 490px;
  display: block;
  margin: 0 auto;
}

input#search-bar{
  margin: 0 auto;
  width: 100%;
  height: 45px;
  border-radius: 5px;
  padding: 0 20px;
  font-size: 1rem;
  border: 1px solid #D0CFCE;
  outline: none;
  &:focus{
    border: 1px solid #008ABF;
    transition: 0.35s ease;
    color: #008ABF;
    &::-webkit-input-placeholder{
      transition: opacity 0.45s ease; 
      opacity: 0;
     }
    &::-moz-placeholder {
      transition: opacity 0.45s ease; 
      opacity: 0;
     }
    &:-ms-placeholder {
     transition: opacity 0.45s ease; 
     opacity: 0;
     }    
   }
 }

.search-icon .fa-search{
    position: relative;
    float: right;
    width: 75px !important;
    top: -39px;
    right: -38px;
    font-size: 30px;
}