Using CSS to add images to ninjaforms

Question

I am trying to modify formatting with CSS in ninja forms. I would like to:

• Add an icon / image above each answer on radio button questions
• Allow users to click on that image or the text to select their answer

Can anyone help me with this code? I'm having trouble getting the images to display.

Thanks!

Answer 1

The easiest way I have found to place images in radio buttons is to do the following:

1. Put and html image tag in the label section <img src="https://www.brothershelpingbrothers.org/wp-content/uploads/2015/08/silver-fire-button.png">
   • this will simply put an image in the label section.
   • if you want to have a text label as well, you can place it either before or after the image tag and edit it with CSS after. I usually do the following because it is quick and easy: <div><img src="https://www.brothershelpingbrothers.org/wp-content/uploads/2015/08/silver-fire-button.png"><br>Button Label 1</div>

2. Next, I add custom CSS to hide the typical radio circle button and create styles for image button selection:

/* NINJA FORM CSS  */

/* Display image buttons inline */
li {
 display: inline-block !important;
}

/* Hide the radio button */
[type=radio] { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}


/* RADIO BUTTON STYLES */

/* Style radio button images */
label > div > img {
  cursor: pointer;
 max-width: 100px !important;
 max-height: 100px !important;
}

/* Style the text label */
label > div {
 color: blue;
 font-size: .8em;
 text-align: center !important;
}

/* CHECKED STYLES */

/* Outlines Selected Radio Button */
.nf-checked-label {
  outline: 3px solid pink;
}

• The above CSS should display buttons like this:

Answer 2

I think this code can solve your problem

function selectInput(id) {

  $("#" + id).prop("checked", true);
}

img {
  width: 50px;
  height: 50px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>

  <img src="http://plainplastic.com/wp-content/uploads/2018/06/one-v2.png" onClick="selectInput('radio1')" />
  <input id="radio1" type="radio" name="answer" value="Answer 1" />Answer 1
  <img src="http://plainplastic.com/wp-content/uploads/2018/06/one-v2.png" onClick="selectInput('radio2')" />
  <input id="radio2" type="radio" name="answer" value="Answer 2" />Answer 2
  <img src="http://plainplastic.com/wp-content/uploads/2018/06/one-v2.png" onClick="selectInput('radio3')" />
  <input id="radio3" type="radio" name="answer" value="Answer 3" />Answer 3

</div>