Hi there, I have made a simple form which contains one text field and a submit button. I want the text field to have a background image with text over it which says "type your email id and hit enter" How do I do that... Plus I as you can read in the text above. I don't need a submit button, instead I just want the user to hit enter and the form is submitted. So there are two things. How do I add an image / background image for the text field and how do I remove the submit button? Thanks in advance
Following would be something as per your idea of background image.. <html> <head> <style type="text/css"> input { background: url('http://img403.imageshack.us/img403/1572/95444315.png') no-repeat; background-position: right; width: 160px; } </style> </head> <body> <input type="text" name="search_text" value="" /> </body> </html> Code (markup): However, I would suggest not to keep a background image, since when you will type, it will get mixed with background and won't be readable. Keep a text which gets cleaned when user clicks on text box and appears again if user leaves text box without typing anything in it..
Firstly thanks for the help. And yes this is what I am looking for. The text comes and goes... The background image contains a simple light pattern so readability is not an issue... but how do I get the text to come and go... ? Regards, Pratik
following will sort out the solution.. <input type="text" value="type and hit enter" onfocus="if(this.value == 'type and hit enter') this.value = '';" onblur="if(this.value == '') this.value='type and hit enter';" /> Code (markup):
hi there, After a lot of R&D... I managed to get this.. . http://esbe.in/intro.html But if you see the text field still is not proper.. also I need to get rid of the subscribe button.. How can I do that.... you can see the source from there only.. I Here is a jpeg of what I am looking for..
Hi. Thanks for the response. As now you can see in the source. the CSS attributes are applied to "input" .. how do I change it to input box... Please if you can have a look at the source of the page and let me know. Thanks
it seems the font you have used on website are not text but image. They are not supported by browsers.. For now you can increase font-size inside text box..