我有一个由Algolia InstantSearch v3.35.1小部件ais-search-box
定义的输入字段,该字段不响应自定义.css文件中的覆盖。
我在下面显示相关信息。使用浏览器调试器查看输入字段元素,似乎可以覆盖的正确小部件样式为input.ais-SearchBox-input
。在其他区域成功完成样式覆盖后,样式覆盖也看起来正确。
对我的错误有任何想法吗?
谢谢, 鲍勃
小部件样式
.ais-SearchBox-input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 0.3rem 1.7rem;
width: 100%;
position: relative;
background-color: #fff;
border: 1px solid #c4c8d8;
border-radius: 5px; }
.ais-SearchBox-input::-webkit-input-placeholder {
color: #a5aed1; }
.ais-SearchBox-input::-moz-placeholder {
color: #a5aed1; }
.ais-SearchBox-input:-ms-input-placeholder {
color: #a5aed1; }
.ais-SearchBox-input:-moz-placeholder {
color: #a5aed1; }
覆盖样式-tmd_basic.css
.mySearchField .input.ais-SearchBox-input{
font-size: 14px;
font-weight: 600;
padding-left: 5px;
padding-bottom: 10px;
background-color: red;
}
search.component.ts
import {Component, OnInit} from '@angular/core';
import {FadeInTop} from "../../shared/animations/fade-in-top.decorator";
import {ActivatedRoute} from '@angular/router';
import algoliasearch from 'algoliasearch/lite';
@FadeInTop()
@Component({
selector: 'app-search',
templateUrl: './search.component.html',
styleUrls: ['../../../assets/css/tmd_basic.css']
})
export class SearchComponent implements OnInit {
search.component.html
<ais-instantsearch [config]="config">
<ais-search-box placeholder="Let's find something on TMD..." class="mySearchField"></ais-search-box>
</ais-instantsearch>
答案 0 :(得分:0)
尝试以下CSS。
mySearchField .ais-SearchBox-input{
font-size: 14px !important;
font-weight: 600 !important;
padding-left: 5px !important;
padding-bottom: 10px !important;
background-color: red !important;
}