在Input中插入可点击图像

Question

我试图在输入中插入可点击的图像，就像这样 举例：

如果用户点击此信息图片，屏幕右侧会显示一条信息。到目前为止，我已完成指令或正确的文字，但我无法在输入中填写可点击的信息图片:(有些帮助吗？JsFiddle DEMO

我的实际代码：

＆＃13;

＆＃13;

body {
  background-color: #112e4c;

}

#form-section1-imput1 {
  width:47%;
  padding-top: 10px;
  padding-bottom: 10px;
  border: none;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  background-color: ;
  font-size:13px;
  -ms-box-sizing:content-box;
  -moz-box-sizing:content-box;
  -webkit-box-sizing:content-box; 
  box-sizing:content-box;
  color:#8da0b4;
  outline: none;
  font-style: italic;
  background-color: #fff;
  font-family: Arial;
  float: left;
  padding-left: 10px;
}

＆＃13;

<input type="text" id="form-section1-imput1" name="name" placeholder="Your Name...">

＆＃13;

＆＃13;

＆＃13;

Answer 1

组成这个非常快速的原型：

＆＃13;

＆＃13;

body {
  background-color: #112e4c;
 
}

#form-section1-imput1 {
  width:100%;
  padding-top: 10px;
  padding-bottom: 10px;
  border: none;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  background-color: ;
  font-size:13px;
  -ms-box-sizing:content-box;
  -moz-box-sizing:content-box;
  -webkit-box-sizing:content-box; 
  box-sizing:content-box;
  color:#8da0b4;
  outline: none;
  font-style: italic;
  background-color: #fff;
  font-family: Arial;
  float: left;
  padding-left: 10px;
}

.input-container {
  position: relative;
  width: 47%;
}

.info {
    width: 20px;
    height: 20px;
    background: url(http://www.nxp.com/files/graphic/help_page/srform/SR_INFO_IMG.gif) no-repeat;
    content: ' ';
    position: absolute;
    right: 0;
    top: 7px;
    cursor: pointer;
}

＆＃13;

<div class="input-container">
  <input type="text" id="form-section1-imput1" name="name" placeholder="Your Name...">
  <div class="info" data-help="Som help text..."></div>
</div>

＆＃13;

＆＃13;

＆＃13;

您必须控制用户何时单击图像并显示工具提示或类似信息。

Answer 2

尝试将图像设置为背景

background: url(http://winnerhun.uw.hu/vigyorpofa.gif) no-repeat scroll 7px 7px;
background-position:right;

更新小提琴 - https://jsfiddle.net/pn6s73ws/1/

Answer 3

以下代码现在看起来不错：

<div id="inputWithImage">
    <input type="text" id="form-section1-imput1" name="name" placeholder="Your Name...">
    <img id="image1" src="https://www.tomtom.com/fr_fr/images/icon-info_tcm144-11893.png" />
</div>

JSFiddle