使用CSS向Ninjaforms添加图像

时间:2018-06-27 04:46:24

标签: css ninja-forms

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

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

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

谢谢!

2 个答案:

答案 0 :(得分: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>

Ninja Form Add Image as Radio Button

  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应该显示如下按钮:

enter image description here

答案 1 :(得分:0)

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

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>