Home/ Questions/Q 6789207
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T17:34:34+00:00

I am using dijit.form.dropDownbutton in my application. However, I want to remove the down

  • 0

I am using dijit.form.dropDownbutton in my application. However, I want to remove the down arrow icon in the drop down button. Is there a way to do so?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    First, don’t do it. It’s there because of the various usability conventions – something users come to expect. It points them to a familiar functionality, where a down arrow icon indicates a dropdown box.

    Secondly, if you choose to ignore the first advice you can go ahead and do it. The button is controlled by (in case of claro theme):

    .claro .dijitArrowButtonInner {
    width: 15px;
    height: 15px;
    margin: 0 auto;
    background-image: url(form/images/buttonArrows.png);
    background-repeat: no-repeat;
    background-position: -51px 53%;
}

    overriding it and adding: display: none; removes the arrow and re-sizes the button. You can override it by, for example, assigning an additional class yourclass to the div and building a paraller CSS hierarchy:

    .claro .yourclass .dijitArrowButtonInner {
    display: none !important;
}

    so that in your <head> part you have:

    <style>
    .claro .yourclass .dijitArrowButtonInner {
        display: none !important;
    }
</style>

    and then:

    <body class=" claro ">
...
    <div id="dropdownButtonContainer" class="yourclass"></div>
...

    If there is a programmatic way that is simpler than that – I am not aware of it.

    EDIT
    also, as a friendly advice, you should really try and accept answers for your questions, otherwise at some point no one will answer you.

    • 0