Jump to content

How to add mini-image to the selectable options?

Recommended Posts

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.

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...