Create a listbox with images | SpreadsheetWeb
Radio Button 0:25 video

How to create a listbox with images

One focused task, a quick video, and concise steps you can scan immediately.

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.
CSS60 lines
.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;
}