搜索栏将不接受关闭按钮

Question

我有这个搜索栏，但是无论如何我似乎都无法添加灰色/黑色的“ x”来清除搜索栏中的文本。希望对此有所帮助。非常感谢！

<div class="mb-3">
  <div class="card">
    <div class="card-body">
      <h5 class="card-title"><span class="card-component-title">Article:</span> {{data.title}}</h5>
      <div class="row">
        <div class="col-md-12">
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text" >Title</span>
            </div>
            <input type="text" class="form-control" [(ngModel)]="data.title">
          </div>
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text">Subtitle</span>
            </div>
            <input type="text" class="form-control" [(ngModel)]="data.subtitle">
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <div class="text-right mb-3">
            <button type="button" class="btn btn-sm btn-primary"
                    (click)="addContentLayout(editContentLayoutModal);">Add section</button>
          </div>
          <table class="table table-sm table-hover ">
            <thead class="bg-light ">
            <tr>
              <th class="w-90">Title</th>
              <th class="w-10 text-center">Delete</th>
            </tr>
            </thead>
            <tbody dragula="ARTICLE-VAMPIRES" [(dragulaModel)]="data['data']">
            <tr draggable *ngFor="let listItem of data.data; index as i" class="pointer-cursor">
              <td (click)="openEditContentLayout(editContentLayoutModal, listItem)">{{listItem.title}}</td>
              <td class="text-center">
                <a href="javascript:void(0)" (click)="deleteItem(i)"><i class="fa fa-trash"></i></a>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>


<ng-template #editContentLayoutModal let-modal>
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">Edit Content</h4>
    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <div class="container">
      <form [formGroup]="layoutFormContainer">
        <div class="row">
          <div class="col">
            <div class="row">
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text" >Title</span>
                </div>
                <input type="text" class="form-control" formControlName="title">
              </div>
            </div>

            <div class="row">
              <quill-editor format="html" formControlName="content" class="h-100"></quill-editor>
            </div>
          </div>
          <div class="col-4">
            <ngx-image-uploader [options]="options" name="imageLayout" (upload)="onUpload($event)" formControlName="image"></ngx-image-uploader>
          </div>
        </div>
      </form>
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Save</button>
  </div>
</ng-template>

import {Component, Input, OnInit} from '@angular/core';
import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
import { ImageUploaderOptions, FileQueueObject } from 'ngx-image-uploader';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: 'app-article',
  templateUrl: './article.component.html',
  styleUrls: ['./article.component.scss']
})
export class ArticleComponent implements OnInit {

  selectedSection: any;
  @Input() data: any;
  layoutFormContainer: FormGroup;
  uploadedImageUrl: any;

options: ImageUploaderOptions = {
        uploadUrl: 'http://46.101.253.10:3000/upload',
        allowedImageTypes: ['image/png', 'image/jpeg','video/mp4','application/pdf'],
        maxImageSize: 500
      };


  constructor(private modalService: NgbModal,
              private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.layoutFormContainer = this.formBuilder.group({
      title: ['' , Validators.required],
      content: ['' , Validators.required],
      image: ['' , [Validators.required, Validators.email]]
    });
  }

  openEditContentLayout(content: any, itemContent: any) {
    console.log(itemContent.image)
    this.selectedSection = itemContent;
    this.uploadedImageUrl = null;
    console.log(this.selectedSection);
    this.layoutFormContainer.patchValue({
      title: itemContent.title,
      content: itemContent.content,
      image: itemContent.image
    });
    this.modalService.open(content, { size: 'lg' }).result.then(() => {
      this.selectedSection.title = this.layoutFormContainer.get('title').value;
      this.selectedSection.content = this.layoutFormContainer.get('content').value;
      this.selectedSection.image = this.uploadedImageUrl ?
        this.uploadedImageUrl : this.layoutFormContainer.get('image').value;
    }, () => {
    });
  }

  addContentLayout(content: any) {
    this.data.data.push({
      title: 'Title',
      content: 'Body'
    });
    this.openEditContentLayout(content, this.data.data[this.data.data.length - 1]);
  }

  deleteItem(index: number) {
    if (confirm('Are you sure you want to delete this item?')) {
      this.data.data.splice(index, 1);
    }
  }

  onUpload(file: FileQueueObject) {
    if (file.response && file.response['body'] && file.response['body']['url']) {
      this.uploadedImageUrl = file.response['body']['url'];
    }
  }

}

Answer 1

我将引导程序与“ x”一起使用时遇到问题。但是，我使用了此CSS，效果很好！

input[type=search] {
    width: 130px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    background-color: white;
    background-image: url('searchicon.png');
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
    position: absolute;
    right: 10px;
    top: 3px;
}

input[type=search]:focus  {
    width: 25%;
    
}

<input type="search" id="myInput" placeholder="Search..">

input[type="search"] {
 -webkit-box-sizing: content-box;
 -moz-box-sizing: content-box;
 box-sizing: content-box;
 -webkit-appearance: searchfield;
}

input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: searchfield-cancel-button;
}