将自定义样式应用于引导选择 .dropdown-menu.open

普加

有没有办法根据其 id 将自定义样式应用于特定引导选择控件的下拉菜单?我有一个名为 myControl 的引导选择控件:

<select name="named[]" class="selectpicker show-tick dropup"
                        data-dropupAuto="true"
                        data-container="#mainContainer"
                        id="myControl" data-width="90%" title="Select your data"></select>

当我点击它并打开下拉菜单时,我想使用 css 应用一些自定义样式。我可以通过使用以下方法一般地做到这一点:

.bootstrap-select.btn-group .dropdown-menu.open {
width: 250px !important;
overflow: auto !important;
background-color: red !important;
}

但这将样式应用于我的应用程序中的所有引导选择控件。我希望能够为一个特定的控件做到这一点。我尝试给出 id:

#myControl .dropdown-menu.open {
width: 250px !important;
overflow: auto !important;
background-color: red !important;
}

但它不起作用。对不起,如果这是一个愚蠢的问题,我对 javascript 和 css 不太擅长,这让我有点发疯。提前致谢。

桑杰·普拉贾帕蒂

我认为它的片段有帮助,我添加了相同的 css

.myClass {
  color: red; width:200px;
}

.myClass option { background:#000; color:#fff} 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="named[]" class="selectpicker myClass show-tick dropup" data-dropupAuto="true" data-container="#mainContainer" id="myControl"  data-width="90%" title="Select your data">
  <option>Hi</option>
  <option>Hello</option>
</select>

.myClass {
  color: red; width:200px;
}

.myClass option { background:#000; color:#fff}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

How to make a Bootstrap 3 dropdown menu open by default when it is inside a collapsed navbar

来自分类Dev

将自定义样式应用于微调器

来自分类Dev

CSS Dropdown menu/container?

来自分类Dev

引导.dropdown-menu类的CSS样式无法与祖先/后代选择器一起使用

来自分类Dev

Dropdown menu displayed on left of screen

来自分类Dev

Bootstrap dropdown menu text color

来自分类Dev

jQuery dropdown plugin - How to know if dropdown is open or not?

来自分类Dev

如何将自定义样式应用于SwitchCompat

来自分类Dev

将自定义样式应用于页面上的所有按钮

来自分类Dev

Ionic 5-如何将自定义样式应用于离子输入

来自分类Dev

仅将自定义样式应用于父mat-tab-group

来自分类Dev

将自定义样式应用于内部Chrome页面

来自分类Dev

将自定义主题应用于Odoo应用

来自分类Dev

为什么typeahead.js tt-dropdown-menu不显示(引导3)?

来自分类Dev

无法将自定义listSelector应用于ListView

来自分类Dev

将自定义函数应用于数据框

来自分类Dev

将自定义功能应用于熊猫df

来自分类Dev

将自定义累积功能应用于熊猫

来自分类Dev

将自定义累积功能应用于熊猫

来自分类Dev

paper-dropdown-menu-重复选择时如何折叠下拉菜单

来自分类Dev

无法重新定义BootStrap的dropdown-menu类的字体大小

来自分类Dev

自定义样式kendo Vertical Menu Angular?

来自分类Dev

Bootstrap dropdown menu jQuery conflicts with other libraries?

来自分类Dev

bootstrap dropdown-menu no CSS格式

来自分类Dev

how to let dropdown menu align-right?

来自分类Dev

在next.js中,如何将自定义CSS类和引导类同时应用于元素

来自分类Dev

如何清除应用于元素的自定义样式?

来自分类Dev

如何将自定义主题应用于Google自定义搜索?

来自分类Dev

_vm。$ refs.menu.open不是函数

Related 相关文章

  1. 1

    How to make a Bootstrap 3 dropdown menu open by default when it is inside a collapsed navbar

  2. 2

    将自定义样式应用于微调器

  3. 3

    CSS Dropdown menu/container?

  4. 4

    引导.dropdown-menu类的CSS样式无法与祖先/后代选择器一起使用

  5. 5

    Dropdown menu displayed on left of screen

  6. 6

    Bootstrap dropdown menu text color

  7. 7

    jQuery dropdown plugin - How to know if dropdown is open or not?

  8. 8

    如何将自定义样式应用于SwitchCompat

  9. 9

    将自定义样式应用于页面上的所有按钮

  10. 10

    Ionic 5-如何将自定义样式应用于离子输入

  11. 11

    仅将自定义样式应用于父mat-tab-group

  12. 12

    将自定义样式应用于内部Chrome页面

  13. 13

    将自定义主题应用于Odoo应用

  14. 14

    为什么typeahead.js tt-dropdown-menu不显示(引导3)?

  15. 15

    无法将自定义listSelector应用于ListView

  16. 16

    将自定义函数应用于数据框

  17. 17

    将自定义功能应用于熊猫df

  18. 18

    将自定义累积功能应用于熊猫

  19. 19

    将自定义累积功能应用于熊猫

  20. 20

    paper-dropdown-menu-重复选择时如何折叠下拉菜单

  21. 21

    无法重新定义BootStrap的dropdown-menu类的字体大小

  22. 22

    自定义样式kendo Vertical Menu Angular?

  23. 23

    Bootstrap dropdown menu jQuery conflicts with other libraries?

  24. 24

    bootstrap dropdown-menu no CSS格式

  25. 25

    how to let dropdown menu align-right?

  26. 26

    在next.js中,如何将自定义CSS类和引导类同时应用于元素

  27. 27

    如何清除应用于元素的自定义样式?

  28. 28

    如何将自定义主题应用于Google自定义搜索?

  29. 29

    _vm。$ refs.menu.open不是函数

热门标签

归档