How to add mini-image to the selectable options?

[Clarity]

Hello everyone!

I have a "Select Options", but I need to illustrate them with images (attach a viewable picture in admin panel to them). How can I do it?

[ttttim]

You can do this with a little bit of extra CSS. This example is what i use for a radio select

.Inputfield_select_option input + .pw-no-select {
  position: relative;
  padding-top: 70px;
  margin-bottom: 20px;
  width: 100%;
  display: inline-block;
  text-align: center;
  color: #333;
  font-size: 14px;
  cursor: pointer;
}

.Inputfield_select_option input + .pw-no-select::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 50px;
  top: 0;
  left: 0;
  display: inline-block;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border: #d9e1ea 1px solid;
  border-radius: 3px;
  margin-bottom: 5px;
}

.Inputfield_select_option input:checked + .pw-no-select::before {
  border: #2a2a2b 2px solid;
}

#Inputfield_select_option_1 + .pw-no-select::before {
  background-image: url(images/option1.png);
}
#Inputfield_select_option_2 + .pw-no-select::before {
  background-image: url(images/option2.png);
}
#Inputfield_select_option_3 + .pw-no-select::before {
  background-image: url(images/option3.png);
}

To add a custom CSS the link below shows one way of doing so.

[Ivan Gretsky]

If using "Select options" fieldtype is not a requirement and you just need to have a more visual way to select things, you could use "Page Reference" fieldtype with InputfieldSelectize.