css - 如何覆盖 Ng-Bootstrap 样式中的样式并将 html 结构编辑为 Typeahead

标签 css angular twitter-bootstrap ng-bootstrap

我正在使用 https://ng-bootstrap.github.io .我想用我的样式覆盖下拉菜单的样式,还想更改 typeahead 组件的一些 css 标签,但似乎看不到在哪里可以这样做?

代码:

<input id="sys_id" type="text" formControlName="sys_id" class="form-input" [ngbTypeahead]="search"/>

例如更改以下内容:

<ngb-typeahead-window class="dropdown-menu show" role="listbox" id="ngb-typeahead-0" style="position: absolute; top: 0px; left: 0px; transform: translate(199px, 354px);"><!----><!--bindings={
 </ngb-typeahead-window>

最佳答案

将这两行添加到 type-ahead-basic.ts 将设置样式

::ng-deep .dropdown-menu.show { background:lightblue;}
::ng-deep .dropdown-item { color:red !important; }

您可以检查一个有效的 stackblitz here - 如果有什么事请告诉我

关于css - 如何覆盖 Ng-Bootstrap 样式中的样式并将 html 结构编辑为 Typeahead,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55203006/

相关文章:

html - 如何将具有 Z 索引的内容居中

css - 应用程序 UI 中移动设备的联系人列表

angular - 如何使用 TypeScript 和 ionic Bootstrap 进行 ng-click?

javascript - Bootstrap 获取字形代码

html - 如何让导航栏元素在 bootstrap 3 中内联显示?

html - 如何使 <div> 完全填充浏览器窗口,包括自 2019 年起的 Mobile Safari

html - 将 + 运算符与非常具体的选择器 CSS 组合

php - Yii : How to make a button with an html tag inside the label

html - 如何使用 div 标签创建表格?

angular - 在 Angular 2 上,当我只从一个大库中导入一个模块时,构建会发生什么?