css - 使用 CSS 将图像添加到 ninjaforms

Question

我正在尝试使用 ninja 表单中的 CSS 修改格式。我想：

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

任何人都可以帮我处理这段代码吗？我无法让图像显示。

谢谢！

Answer 1

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

1. 在标签部分放置和html图像标签<img src="https://www.brothershelpingbrothers.org/wp-content/uploads/2015/08/silver-fire-button.png">
   • 这将简单地将图像放在标签部分。
   • 如果你也想有一个文本标签，你可以把它放在图像标签之前或之后，然后用 CSS 编辑它。我通常会执行以下操作，因为它既快速又简单：<div><img src="https://www.brothershelpingbrothers.org/wp-content/uploads/2015/08/silver-fire-button.png"><br>Button Label 1</div>

2. 接下来，我添加自定义 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>