HTML Input Text with icon

Question

I am working on a webpage where I have a HTML Input Text element which is disabled onload. I currently have a edit button next to the Input Container onclick of which I disable/enable the field.

<input type="text" name="TxtBx1" id="TxtBx1" value="This is the first Textbox" onblur="toggleState('TxtBx1')" disabled="true">
<img class="onInput" src="/Server_Status/images/edit.png" title="Edit" alt="Edit" height="15" width="15" onclick="toggleState('TxtBx1')">

Is there any other way in which I could place this icon in the input tab itself without overlapping the text.

img.onInput
{
    position: relative;
    left: -20px;
}

I tried using CSS with but the text gets underneath the icon which I do not want.

I am trying to get something like the "google search" add-on in firefox. Is that at all possible with simple input text and icon?

Thanks in advance :)

Update: enter image description here I want a button like in this image on text input. The icon is clickable and I want to trigger a JavaScript function onClick event.

Found the answer I was looking for: https://stackoverflow.com/a/6258628/2596762

you mean putting background image with css? With that image be clickable - I need to trigger JS function onclick? — Rahul Dabas, Aug 29 '13 at 15:35
Then I do not understand what you mean by an image in the input field — mplungjan, Aug 29 '13 at 15:37

score 4 · Answer 1 · answered Aug 29 '13 at 17:16

4

You can create a CSS class with the background property and specify the location of your image, set it to no-repeat so it only displays the image once, then fiddle with the positioning by adding padding attributes and the like.

So for your CSS, something like:

.search {
    background: url('image.jpg') no-repeat;
}

Then you just add it as the class attribute to your text box tag:

<input type="text" name="TxtBx1" id="TxtBx1" class="search">

answered Aug 29 '13 at 17:16

MattD

4,220
2
34
44

i cant use this method MattD, I need the button to be clickable, for that I need to create a img tag so I can get my onClick event. – Rahul Dabas Aug 29 '13 at 17:21
You want it to be a spyglass icon, but inside the text box, and when you click the spyglass it runs your onclick? – MattD Aug 29 '13 at 17:28
1

I dont know what spyglass icon is. I am using [this example fiddle] (http://jsfiddle.net/PJZmv/1677/) for my code. Instead of 'X' I am using a .png icon. – Rahul Dabas Aug 29 '13 at 17:59
The image you put the circle around in your example image is of a spyglass . . . . – MattD Aug 29 '13 at 18:08
ok .. thanks MattD .. i will take a look at what spyglass does. i am able to do what i need to with the fiddle however if this is a better solution i'll accept the answer - Thanks :) – Rahul Dabas Aug 30 '13 at 13:07
Oh my word, I'm not mentioning any sort of specific software when I say spyglass. Maybe it would have been better if I called it the magnifying glass image? That's another term for spyglass. – MattD Aug 30 '13 at 16:30
OK .. thats what I was thinking when you first mentioned it. But no .. an Image set by css doesn't help me. Unless there is a way to trigger a JS function using css which I dont think is possible. – Rahul Dabas Aug 30 '13 at 17:52

score 1 · Answer 2 · answered Oct 18 '15 at 11:18

1

  background: url(user.gif) no-repeat scroll 7px 7px;
  padding-left:30px;

answered Oct 18 '15 at 11:18

Med Elgarnaoui

1,612
1
18
35

It's best if you add some commentary and not just toss code out there. – Parkash Kumar Oct 19 '15 at 05:18

Rajan471 · Answer 3 · 2014-07-02T05:17:32.107

try using this:

<div class="search-div">
<input class="search" type="text" placeholder="Search here" />
<a href="#"><img src="image-url" /></a></div>

here is css code:

.search-div{
  border:1px;
  border-style:solid;
  border-color: lightgrey;
}
.search{
border:none;
}

This css will make div look like a text box and removes the outline of input text-box. You can format the size of image link and also change the link address from "#" to the desired url.

HTML Input Text with icon

3 Answers3