使用CSS向Ninjaforms添加图像

Question

我正在尝试使用忍者形式的CSS修改格式。我想：

• 在单选按钮问题的每个答案上方添加图标/图像
• 允许用户单击该图像或文本以选择答案

有人可以帮助我使用此代码吗？我无法显示图像。

谢谢！

Answer 1

我发现在单选按钮中放置图像的最简单方法是执行以下操作：

1. 在标签部分<img src="https://www.brothershelpingbrothers.org/wp-content/uploads/2015/08/silver-fire-button.png">中放置和html图像标签
   • 这只会将图像放在标签部分。
   • 如果您还希望有一个文本标签，则可以将其放置在image标记之前或之后，然后在CSS后面进行编辑。我通常会执行以下操作，因为它既快速又容易：<div><img src="https://www.brothershelpingbrothers.org/wp-content/uploads/2015/08/silver-fire-button.png"><br>Button Label 1</div>

1. 接下来，我添加自定义CSS来隐藏典型的单选圆圈按钮并为选择图像按钮创建样式：

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

• 上面的CSS应该显示如下按钮：

Answer 2

我认为这段代码可以解决您的问题

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>