HTML Input Text with icon [duplicate] - html

This question already has answers here:
Clear icon inside input text
(18 answers)
Closed 6 years ago.
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:
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 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">

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

try using this:
<div class="search-div">
<input class="search" type="text" placeholder="Search here" />
<img src="image-url" /></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.

Related

put input type text in the center of an image

I need to create an html page. In this html page, I need to have an image with an a <input type="text "/>. This input is in the middle of the image; this input type text also have the "search" icon inside the input on the right.
I tried to build the code in this way:
<html>
<img src="./home/image.jpeg">
<input type="text" name="food" placeholder="insert the food">
</input> <!-- this input has the icon search on the right-->
</img>
<html>
Obviously it doesn't work. Is there a good way to make it work?
Put your input inside a div, and make the image the background-image of that div.
You need to be more specific with your question. can you upload a link. but you also Add a Background image to the input type text. Something like this:
input { background-image: url("search_icon.png"); position:absolute; }
This should do it for you
html:
<div class="bg">
<input type="text" name="food" placeholder="insert the food">
</div>
CSS:
.bg{
background-image: url("http://lorempixel.com/200/200/");
background-repeat:no-repeat;
height:200px;
width:200px;
line-height:200px;
text-align:center;
}

Make an Image as a button

Well I wanna make an image as a button .
this is my code :
<input type="image" name"lvl1_1" style="border:1px dotted #000000;" class="main" width="50" src="images/main/lvl1/1.png">
This code doesn't work probaply , if I change the type from 'image' to 'submit' it works but the image and the effects disappear .
I don't really see a problem in the code :/
There are three ways of doing so:
Add an OnClick="whatever the image button is supposed to do" attribute to the input type image.
Take the input type to be button instead of image and use the background="image source" attribute on it.
You can use the type image-set and give coordinates of the area you want to make clickable.
If you are trying to submit a form, you can create a submit button, then set the image for the button as a background image using CSS.
HTML:
<input type="submit" name"lvl1_1" style="border:1px dotted #000000;" class="main" width="50" >
CSS:
.main {
background-image: url("images/main/lvl1/1.png");
background-position: 0px 0px;
background-repeat: no-repeat;
}

Creating a custom html button with background Image and Text

I would like to know how I can create a custom HTML button which has a background Image and I can show a custom text over that image.
For example, I would like to show a submit button for which I have a background image for that button and the text "Submit" comes on top of that Image.
I tried this -
<input type="button" value="Submit" style="background-image: url(pages/images/ButtonBackground.png);">
However, it does not work properly. I just see the test submit and the button but the image does not show up.
I recommend that you use <button> instead of <input type='submit' /> or <input type='button' />. The reason is that you can embed HTML elements (nest elements) into the <button> element. This way, you can make a much more flexible button, which can be customized even more.
<button>
<span class='image'></span>
<span class='text'>Click Me!</span>
</button>
<input type="button" value="Submit" style="background: url(pages/images/ButtonBackground.png) no-repeat; width:px; height:px;">
you have to specify the width and height of the image so it covers your button and yes check the path of the image
this is exactly what I have in one of my css and usually what I do in this situation:
html
<input type="submit" value="" name="commit" id="message_submit" class="registerbtn"/>
css
.registerbtn{background:url(../images/btn_registro.jpg) no-repeat; width:98px; height:32px; border:none;}
The simplest way is probably to use a button element with a background. Use e.g. padding properties to make the button suitably large. It is a useful precaution to set a background color for the button, for use when the background image is not shown for some reason, using a color that has sufficient contrast with the text (so it should be similar in color usage to the background image). Example:
<button type=submit style="background: #ccc url(test.jpg); padding: 0.5em 1em">Go!</button>
Caveat: In old versions of IE, there are several bugs in the implementation of button elements. The bugs bite most seriously if a form has several submit buttons.
The reason for the failure when using an input type=submit element is that they are commonly implemented by browsers using built-in routines that are rather immune to CSS.
Here's how I created buttons with actual pics on them along with text. In CSS I put:
button {
display: inline-block;
height: 200px;
padding: 2px;
margin: 2px;
vertical-align: top;
width: 400px;
}
#alldogs-close-CSS {
background-image: url( All_dogs.jpg );
/*background-size: 100px 130px;*/
height: 150px;
width: 300px;
}
The button controls my height and width and #alldogs-close-CSS is the pic I wanted to show on the button.
In my Index.html page I just put:
<button id="alldogs-close-CSS">All Dogs</button>
Now the text isn't very pretty at the moment, but I haven't played with it yet. It does work, though.

Link inside of input tag

How to display a a href and a img src inside a input box (text box). ex: i want to display this inside a text box ( <input id=link )
<img src="http://www.mysite.com/img.jpg" border="0" alt="mysite.com">
thanks in advance.
Based on the comments, I would guess that you want an input field that has that HTML code as the default text. You must use character reference codes for quotes and less/greater than signs.
<input type="text" value="<a href="http://www.mysite.com/link" target="_blank"><img src="http://www.mysite.com/img.jpg" border="0" alt="mysite.com"></a>" />
(By the way, you mentioned "like in Photobucket" -- you can just look at the site's HTML to see how they do it.)
You have two options.
Place the image as a background of the input, but this won't be clickable.
Absolutely position the element over an input.
1:
.myInput { background:url(path/to/img.jpg) 5px 5px no-repeat; }
2:
HTML
<div class="inputContainer">
<input class="myInput" type="text" name="myInput" id="myInput" />
<img src="#" />
</div>
CSS
.inputContainer { position:relative; }
.myInput { padding-left:25px; /* This will move the text from under the image */ }
.inputImg { left:5px; position:absolute; top:5px; z-index:5; }
You'll need to play with the position and values depending on your input size, image size and general placement, but that should do what you want.
As comments mention, you can't literally put a link in an input text box (although you could simulate one with JavaScript).
For the background image, use CSS background-image.

Accessible submit button with background image

I have a form submit button, using that has a background image containing a 'pretty' styled version of the 'value' text.
I was hiding the html value text using:
text-indent: -9000px;
font-size: 0;
However, with image turned off (for accessibility testing) there is obviously no button text displayed.
Removing the above brings the value text back, but it overlays on top of the image.
How can I have the background image on top of the value text?
By first guess is some combination of <button><span></span></button> ?
What about using an img tag inside the button, and giving that an alt attribute:
HTML:
<button class="button">
<img src="http://www.google.nl/logos/2010/stnicday10-infstant.jpg" alt="google"/>
</button>
CSS:
.button {
background: transparent;
border: 1px solid Black;
}
You could do something like this: <button>Your BTN Text<span class="img"> </span></button>
and in CSS:
button { position: relative;}
button span {
position: absolute;
text-indent: -9000px;
top:0;
left: 0;
right:0;
bottom:0;
background: url(yourimage.whatever);
}
so if us disable the images the text is still visible under the absolute element.
Make as value="" (empty):
<input type='submit' name="csubmit" value="" />
If you have multiple submit buttons and validating based on button clicked leave value with empty space:
<input type-"submit" name="csubmit1" value=" " />
<input type-"submit" name="csubmit2" value=" " />
<input type-"submit" name="csubmit3" value=" " />
Set the button's value to empty:
<input type="submit" value="" />
and you can remove the text-indent from your CSS.
This will obviously display no text whatsoever, but when you disable the CSS background, the button will still be visible.