Remove select buttons on images and highlight selected images instead

  • PeterMW
    Asked on March 18, 2019 at 8:10 AM

    I am using the Image Radio Buttons widget. I've already hidden the text and reduced the spacing:

    1552910618Colour Screenshot 10

    I would like to get rid of the black "select buttons" and only have the selected image highlighted with a smaller centered dot overlay when selected. 

    Any ideas?

    Thanks.

  • Mertkan JotForm Developer
    Replied on March 18, 2019 at 9:57 AM

    Could you try this CSS codes for the solution?

    Firstly, you should delete your CSS code in widget. Then, please copy this code:

    label { display: none;}

    .black-radio { display : none;} 

     

    li.checked:before {

    content:".";

    width: 9px;

        height: 9px;

        background: aliceblue;

        border-radius: 50%;

        top: 25%;

        position: absolute;

        color: transparent;

        left: 16px;

    }

    li { position: relative;}

    ul {

    position: relative;

    }

    Remove select buttons on images and highlight selected images instead Image 10

    Please let us know if you need further assistance.

  • PeterMW
    Replied on March 18, 2019 at 10:03 AM

    Thanks for this.

    Can the dot be change to different color, so that it works on the white and grays as well?  The white is too light to see the selection was made on the color. Perhaps even a border on the dot would help.

    Also, I need to reduce the space between the images, side to side. and reduce the space between the rows, and the top and bottom of the widget.

    Thanks

  • Victoria_K
    Replied on March 18, 2019 at 10:19 AM

    I can suggest the following layout:

    Remove select buttons on images and highlight selected images instead Image 1 Screenshot 20

    You can add this code to widget: 

    How-to-Inject-CSS-Codes-to-Widgets

    li.checked:before {

        border: 1px solid black;

        top: 35% !important;

        left: 35%;

    }

    li {

        margin: 0 !important;

        height: 30px;


    }

  • PeterMW
    Replied on March 18, 2019 at 10:58 AM

    Thanks Victoria!