Search Knowledge Base by Keyword
How to create a listbox with images
To create a listbox with images;
- Open Designer Interface,
- Go to the ‘Stylesheet’ module.
- Add a new stylesheet.
- Enter the CSS rule for creating a listbox with images.
- Save the stylesheet by clicking on the “Save” button.
.list-group-item:before {
left:-50px;
top: 10px;
height: 32px;
width: 32px;
display: flex;
}
.list-group-item[value='Boston'] :before {
width: 100px;
height: 120px;
background-image: ur1(https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Boston_common_20060619.jpg/240px-Boston_common_20060619.jpg');
content: ' ';
background-repeat: no-repeat;
background-size: cover;
display: block;
margin-bottom: 5px;
}
.list-group-item[value='Los Angeles']:before {
width: 100px;
height: 120px;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/3/38/Chicago_sunrise_3-jpg');
content: '';
background-repeat: no-repeat;
background-size: cover;
display: block;
margin-bottom: 5px;
}
.list-group-item[value='Miami']:before {
width: 100px;
height: 120px;
background-image: url ('https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Mouth_of_Miami_River_20100211.jpg/2880px-Mouth_of_Miami_River_2');
content:'';
background-repeat: no-repeat;
background-size: cover;
display: block;
margin-bottom: 5px;
}
.list-group-item[value='New York']:before {
width: 100px;
height: 120px;
background-image: url ('https://upload.wikimedia.org/wikipedia/commons/c/c3/Lady_Liberty_under_a_blue_sky_%28cropped%29_%28cropped%29.jpg'):
content: '';
background-repeat: no-repeat;
background-size: cover;
display: block;
margin-bottom: 5px;
}
.radio-list-item label {
position: absolute;
bottom: 10px;
left: 18px;
color: #fff;
-webkit-text-stroke-width: 0.2px;
-webkit-text-color: #585757;
}