Can you please help with css for visual multiselect

  • Profile Image
    creswellcasey
    Asked on June 09, 2017 at 03:14 AM

    Hi there

    I have a form using visual multiselect

     

    Could you please tell me the css so that when you hover over options on the left, its white text on a red background

    And if selected it then becomes red text when the option moves to the right?

    Thanks

  • Profile Image
    fatihjy
    Answered on June 09, 2017 at 04:35 AM

    Hi,
    You can add following CSS:

    li.ms-elem-selection.ms-selected {

        color: red!important;

    }

    li.ms-elem-selectable.ms-hover {

        background: red!important;

     

    }

    Have a good one!

  • Profile Image
    BJoanna
    Answered on June 09, 2017 at 04:35 AM

    Is this what are you trying to achieve? 

    If so, add this CSS code to visual multi select widget Custom CSS field:

    .ms-container .ms-selectable li.ms-hover, .ms-container .ms-selection li.ms-hover {

        background-color: red!important;

    }

    .ms-elem-selection.ms-selected {

        color:red!important;

    }

    .ms-container ms-selected li.ms-hover, .ms-container .ms-selection li.ms-hover {

        color: #fff!important;

    }

    Add this CSS code to all visual multi select widgets on your form.

    Here is my demo form: https://form.jotformpro.com/71591995887985 

    Feel free to test it and clone it.

    Hope this will help. Let us know if you need further assistance. 

  • Profile Image
    creswellcasey
    Answered on June 09, 2017 at 05:05 AM

    This is awesome and perfect.

    Thank you sooooooo much!

    Regards

    Cres

  • Profile Image
    creswellcasey
    Answered on June 09, 2017 at 06:43 AM

    You can see the new form on https://mobeez.com

    Cheers

    Cres