我有这个搜索栏，但是无论如何我似乎都无法添加灰色/黑色的“ 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">×</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'];
}
}
}
答案 0 :(得分：0)
我将引导程序与“ 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;
}