CODEWITHSUNDEEP
htmlcss
Eugenio
Eugenio

Reputation: 489

Insert clickable image inside Input

I'm trying to insert a clickable image inside an input, just like this example bellow:

EXAMPLE

If user clicks this info image an information will appear on the right side of the screen. So far I have the instruction or the right text done, but I can't fit the clickable info image inside my input:( some help? JsFiddle DEMO

My actual code:

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;
}
<input type="text" id="form-section1-imput1" name="name" placeholder="Your Name...">

Upvotes: 3

Views: 4369

Answers (3)

Ramy
Ramy

Reputation: 11

The following code looks ok now:

<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.

Upvotes: 0

nikoskip
nikoskip

Reputation: 1920

A made up this very quick prototype:

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

You must control when te user clicks the image and display a tooltip or similar.

Upvotes: 1

koolhuman
koolhuman

Reputation: 1651

try setting the image as background

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

updated fiddle - https://jsfiddle.net/pn6s73ws/1/

Upvotes: 0

Related Questions