1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Changing form field background

Discussion in 'CSS' started by pratik, Nov 30, 2009.

0
  1. #1
    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
     
    pratik, Nov 30, 2009 IP
  2. mastermunj

    mastermunj Well-Known Member

    Messages:
    687
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    110
    #2
    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..
     
    mastermunj, Nov 30, 2009 IP
    pratik likes this.
  3. pratik

    pratik Notable Member

    Messages:
    2,305
    Likes Received:
    114
    Best Answers:
    0
    Trophy Points:
    200
    #3
    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
     
    pratik, Nov 30, 2009 IP
  4. mastermunj

    mastermunj Well-Known Member

    Messages:
    687
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    110
    #4
    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):
     
    mastermunj, Nov 30, 2009 IP
  5. pratik

    pratik Notable Member

    Messages:
    2,305
    Likes Received:
    114
    Best Answers:
    0
    Trophy Points:
    200
    #5
    This is working very nice.
    Thanks
     
    pratik, Dec 1, 2009 IP
  6. pratik

    pratik Notable Member

    Messages:
    2,305
    Likes Received:
    114
    Best Answers:
    0
    Trophy Points:
    200
    #6
    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..
     
    Last edited: Dec 7, 2009
    pratik, Dec 7, 2009 IP
  7. mastermunj

    mastermunj Well-Known Member

    Messages:
    687
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    110
    #7
    in that case apply font-family, font-size attributes to your input box and it will serve the purpose :)
     
    mastermunj, Dec 7, 2009 IP
  8. pratik

    pratik Notable Member

    Messages:
    2,305
    Likes Received:
    114
    Best Answers:
    0
    Trophy Points:
    200
    #8
    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
     
    pratik, Dec 7, 2009 IP
  9. mastermunj

    mastermunj Well-Known Member

    Messages:
    687
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    110
    #9
    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..
     
    mastermunj, Dec 7, 2009 IP