Change background color of column visibility dropdown menu

Change background color of column visibility dropdown menu

easynoweasynow Posts: 7Questions: 4Answers: 0

I'd like to change the background color of the column visibility dropdown menu. I've tried this with CSS but it doesn't seem to work. I could see a similar question but the answer didn't actual show the code that resolved the issue.

Here's my CSS, which is being applied in the head section of the file after bootstrap CSS and datatables CSS have been applied.

<style type="text/css">
.buttons-columnVisibility   { background-color:red}

</style>

Answers

  • allanallan Posts: 63,535Questions: 1Answers: 10,475 Site admin
    div.dt-button-collection {
      background-color: red;
    }
    

    should do it.

    Allan

  • easynoweasynow Posts: 7Questions: 4Answers: 0

    Thank you for the response. That did change the color of the dropdown box overall but not of the individual items, here's the HTML for the particular item:

    <a class="dt-button dropdown-item buttons-columnVisibility active" tabindex="0" aria-controls="mytable" href="#" data-cv-idx="0"><span>#</span></a>
    

  • allanallan Posts: 63,535Questions: 1Answers: 10,475 Site admin

    That doesn't look like an image from our Bootstrap integration. They have blue buttons.

    Probably the best way to find the right selector for your specific setup, is to right click on the element and select "Inspect". That will identify the element for you and help get the right CSS selectors.

    Allan

Sign In or Register to comment.