How to change the bootstrap multiselect dropdown height and font size?

Question

I am trying to do a multiselect dropdown using bootstrap similar to the demo which is mentioned in the link below.

http://www.aspsnippets.com/Articles/Multiple-Select-MultiSelect-DropDownList-with-CheckBoxes-in-ASPNet-using-jQuery.aspx

I am able to change the width by using buttonWidth property. But I could not find anything to change the height of the button. I also would like to change the font size and font. Kindly help me in finding a way to change the height and font of dropdown.

Solution 1

If you have same code as in aspsnippets.com. Then you can add this style in the head section (Replace X with number):

button.multiselect {
    height: Xpx;
    font-size: Xpx;
}

Solution 2

Hi Indira you could achieve the change in height & font by simply applying the adding following css

.multiselect .dropdown-toggle .btn .btn-default {
    height: 62px;
    font-family: cursive;
}

Change them according to your needs.

Note: Please be sure that it would not affect any other element on your page.

Comments

[Indira Pranoi]

I am using this dropdwown in different page as well. It should not get affected. In that case what we can do?

[Prakash Thete]

Add this class only to page on which you want to change the appearance do not include this in common external css file(If you are using any).

[Indira Pranoi]

I am using the dropdown in different page as well. So if I use this code in my Css page, will that affect other dropdowns?

[Bikee]

Okay, then add one custom-class to the parent div which includes this button. Then add styles into .custom-class button.multiselect{}. Or, you can add the answered style only to the page which needs customized multiselect.