Formating "Visual Multi Select" widget with CSS

  • Profile Image
    Asked on January 05, 2016 at 01:00 PM

    How can I format the widget "Visual Multi Select"?

    I don't know so much about CSS.

    I know where to insert the code, but I don't know what the code is.

    What I want to do:

    The whole thing wider (so the text will fit in a single line).


    Header text:

    bold, center

    Header background color



    No white border


    Or maybe you can send me the whole CSS code for this widget, so I just can adjust the values? Or can I find it myself somewhere?

  • Profile Image
    Answered on January 05, 2016 at 02:50 PM

    You do not require to add CSS code to adjust the width of the widget. If you enter the properties of the widget, you can just increase the width of the widget to your liking.

    Please let us know if this helps.


  • Profile Image
    Answered on January 05, 2016 at 06:25 PM

    Thank you! Great!

    And the rest of my question I could fix myself.
    Just for other readers of this post I will share the code:


    To get this layout one need this code:

    .Default .custom-header {
     border: 0px solid #000000;
    background: none;
    font-weight: bold;
    font-size: 120%;
    color: #000000;

    .Default .ms-container .ms-selectable, .Default .ms-container .ms-selection {
     background: #FFFFFF;
     border-bottom: 1px solid ;#000000;

    .Default .ms-container .ms-list {
    border: 0px solid #FFFFFF;


  • Profile Image
    Answered on January 05, 2016 at 10:22 PM

    Thanks a lot for sharing with our users your workaround, we really appreciate it!