-
PeterMWAsked 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:
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.
Page URL: https://form.jotform.com/90418510448253 -
Mertkan JotForm DeveloperReplied 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;
}
Please let us know if you need further assistance.
-
PeterMWReplied 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_KReplied on March 18, 2019 at 10:19 AM
I can suggest the following layout:
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;
}
-
PeterMWReplied on March 18, 2019 at 10:58 AM
Thanks Victoria!