Как оформить стиль dropDownButton?

Я хочу изменить цвет выпадающего меню, чтобы оно выглядело как "btn btn-primary". Но он также меняет цвет всех пунктов меню, а также перемещает их вправо. Вот как выглядит оригинальный выпадающий список:

Затем я оформляю это так:

        <xp_1:dropDownButton id="dropDownButton1">
            <xp_1:this.treeNodes>
                <xp_1:basicContainerNode label="Open"
                    styleClass="btn btn-primary">
                    <xp_1:this.children>
                        <xp_1:basicLeafNode label="item1">
                        </xp_1:basicLeafNode>
                        <xp_1:basicLeafNode label="item2">
                        </xp_1:basicLeafNode>
                        <xp_1:basicLeafNode label="item3">
                        </xp_1:basicLeafNode>
                    </xp_1:this.children>
                </xp_1:basicContainerNode>
            </xp_1:this.treeNodes>
        </xp_1:dropDownButton>

И тогда я получил:

Итак, как мне стилизовать только кнопку ОТКРЫТЫЙ раскрывающийся, но сохранить элементы меню в стиле по умолчанию, чтобы она шла под кнопкой, а не справа. Я ошибаюсь в этом стиле, поэтому не могу понять, как добавить значок кнопки.

HTML генерируется:

<html lang="en">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/xsp/.ibmxspres/.mini/css/@B3r&amp;@B3o&amp;@B3m&amp;@B3p&amp;@B3s.css">
<script type="text/javascript">var dojoConfig = {locale: 'en-us'};</script>
<script type="text/javascript" src="/xsp/.ibmxspres/dojoroot-1.9.7/dojo/dojo.js"></script>
<script type="text/javascript" src="/xsp/.ibmxspres/.mini/dojo/.en-us/@Iq.js"></script>
<script type="text/javascript">dojo.require("ibm.xsp.widget.layout.xspClientDojo")</script>
<script type="text/javascript" src="/xsp/.ibmxspres/.extlib/responsive/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/xsp/.ibmxspres/.extlib/responsive/bootstrap3/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/xsp/.ibmxspres/.extlib/responsive/xpages/js/xsp-mixin.js"></script>
</head>
<body class="xsp dbootstrap bootstrap-theme">
<form id="view:_id1" method="post" action="/t_dir/myDb.nsf/TEST.xsp?bpp=1" enctype="multipart/form-data">
<div class="btn-group"><div class="btn-group"><button type="button" id="view:_id1:dropDownButton1_ab_0" data-toggle="dropdown" class="btn btn-primary btn btn-default dropdown-toggle">Open <span class="caret"></span></button>
<ul class="btn btn-primary dropdown-menu">
<li class="menu-item"><a>item1</a></li>
<li class="menu-item"><a>item2</a></li>
<li class="menu-item"><a>item3</a></li>
</ul>
</div>
</div>

<input type="hidden" name="$$viewid" id="view:_id1__VUID" value="!710qd094s9ihvkilfn1r22sda!">
<input type="hidden" name="$$xspsubmitid">
<input type="hidden" name="$$xspexecid">
<input type="hidden" name="$$xspsubmitvalue">
<input type="hidden" name="$$xspsubmitscroll">
<input type="hidden" name="view:_id1" value="view:_id1"></form>
</body>
</html>
Источник

1 ответ

Создать определенный класс с background-color для ваших предметов? Вот так http://www.w3schools.com/css/css_dropdowns.asp

Источник
Другие вопросы по тегам