Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 12
  1. #1
    Senior Member raspberryh's Avatar
    Join Date
    Aug 2004
    Location
    Erie, PA
    Posts
    882
    Member #
    7208
    Liked
    1 times
    Hi,
    I'm trying to hide a form input field and put a background image in its place (so as to use a form field that I made in Photoshop)... I have only found like two sources online for doing this and neither seem to work for me... Does anyone have the code for this?
    Thanks!
    Heather
    choosy developers choose gif!
    website | paintings | blog

  2.  

  3. #2
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    I not sure I understand what it is you are trying to do, but I know you can format form fields in CSS the way you would do anything else. I would assume you can simply add the background image that way.
    Shani

    I have an eye for detail like you'd never believe.

  4. #3
    Senior Member raspberryh's Avatar
    Join Date
    Aug 2004
    Location
    Erie, PA
    Posts
    882
    Member #
    7208
    Liked
    1 times
    Well basically like this: http://www.picment.com/articles/css/funwithforms/
    but I can't seem to get that one to work...
    Thanks
    choosy developers choose gif!
    website | paintings | blog

  5. #4
    Senior Member straight_up's Avatar
    Join Date
    Dec 2003
    Location
    Pennsylvania/Arizona
    Posts
    601
    Member #
    4309
    well obviously try to follow the tutorial.. post specific problems here and link to or attach your code.
    I am Alan Hogan (@alanhogan on Twitter). I like PHP, UI/UX design, and OS X.

  6. #5
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    That tutorial seems very confusing.

    I was able to style a form fine in CSS without hiding anything. I did not change the background elements, only the appearance of the text & text areas. It seems like there would be an easier way, without that background image he uses. Here is an example that I did..

    Try playing with form tags in CSS! Also, send a link to what you're working on.
    Shani

    I have an eye for detail like you'd never believe.

  7. #6
    Senior Member raspberryh's Avatar
    Join Date
    Aug 2004
    Location
    Erie, PA
    Posts
    882
    Member #
    7208
    Liked
    1 times
    straight_up,
    my question was whether anyone here had some already-written code that they themselves had used that i could use as an alternative to what i had found. "obviously" i DID follow the tutorial. i just thought maybe there was another way it was done that would work better for me.
    choosy developers choose gif!
    website | paintings | blog

  8. #7
    Senior Member straight_up's Avatar
    Join Date
    Dec 2003
    Location
    Pennsylvania/Arizona
    Posts
    601
    Member #
    4309
    my bad, raspberryh, i guess I didn't get what you were asking.

    Thiss hould give you a nice head start.
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
      <meta http-equiv="content-type" content="text/html; charset=windows-1250">
      <meta name="generator" content="PSPad editor, www.pspad.com">
      <title>test</title>
      <style type="text/css">
      input.styled{
        border: 3px dotted #f3c;
        color: #f9c;
        background: #3c6 url("http://www.ghscc.com/skins/default/original/title-bg.gif") no-repeat scroll;
        font-size: 150%;
      }
      </style>
      </head>
      <body>
       <form action="#" method="post">
        <input type="text" class="styled" value="Search" onfocus="if (this.value=='Search') { this.value=''}" />
       </form>
      </body>
    </html>
    I am Alan Hogan (@alanhogan on Twitter). I like PHP, UI/UX design, and OS X.

  9. #8
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    Hey raspberryh,

    I came across something like what you're trying to achieve, it's here. I started to look at the code, but it's lengthy and I am a little pressed for time, but I hope it's helpful.
    Shani

    I have an eye for detail like you'd never believe.

  10. #9
    Senior Member straight_up's Avatar
    Join Date
    Dec 2003
    Location
    Pennsylvania/Arizona
    Posts
    601
    Member #
    4309
    interestingly I am doing this myself, now, for my own site (it's not online yet). Remind me sometime and I'll share.
    I am Alan Hogan (@alanhogan on Twitter). I like PHP, UI/UX design, and OS X.

  11. #10
    Senior Member straight_up's Avatar
    Join Date
    Dec 2003
    Location
    Pennsylvania/Arizona
    Posts
    601
    Member #
    4309
    Need to remind me. Check it out here.
    http://demo.pixelsandpages.com/alan_...st_search.html

    PS: don't steal that design, anyone ;-)
    But you're more than welcome to learn from the text box and related code!
    I am Alan Hogan (@alanhogan on Twitter). I like PHP, UI/UX design, and OS X.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Search tags for this page

background image on form field

,

best web page background for form input

,

css form field background image

,

form input background image

Click on a term to search for related topics.
All times are GMT -6. The time now is 05:00 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com