Skip to main content

How to create a listbox with images

You are here:

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;
}

 

Tags: