SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Creating semi-transparent input fields

    I have been trying for days to find a method that will show text input fields and select drop-downs with transparency (about 70% - I already have the transparent PNG). The thread at http://www.sitepoint.com/forums/show...as-transparent comes close, but my submit button (image) has a transparent PNG behind it which looks bad. Also, I need the select drop-downs to have this transparency if possible. I don't know if this will also work for radio buttons and check boxes, but that would be super.

    Basically, I want the background to show through, but have a little of the white color of the input fields to show. It needs to work across all browsers, but ancient browsers can just degrade to white.

    Any ideas? It's amazing how little information is available on how to do this.

    Please see attachment for the end goal.

    Thanks!

    Tom

    1.png

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Hi tomsimon. Welcome to the forums.

    Rather than images, a better option is to use rgba colors. Try this, for example:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    
    <title>Name Email Message Form</title>
    <style type="text/css" media="all">
    body  {background: orange; font: 100%/1.375 georgia, "times new roman", serif;}
    fieldset {border: 0; padding: 0; margin: 0;}
    legend {position: absolute; left:-9999px}
    input, textarea {font-size: 1em; width: 20em;font-family: arial; border: none;padding: 2px; background: rgba(255,255,255,0.5);}
    input[type="submit"] {width: 60px;}
    textarea {overflow: auto;}
    </style>
    </head>
    
    <body>
    <div id="content">
    <form method="post" action="">
    <fieldset> 
    <legend>Contact Form</legend>
    <label for="name">Name</label><br>
    <input name="name" type="text" size="40" maxlength="60" id="name" value="" autofocus><br>
    
    <label for="email">Email Address</label><br>
    <input name="email" type="text" size="40" maxlength="60" id="email" value=""><br>
    
    <label for="comm">Comments</label><br>
    <textarea name="message" rows="10" cols="50" id="comm"></textarea><br>
    
    <input type="submit" name="submitted" value="Send">
    </fieldset>
    </form>
    </div>
    </body>
    </html>
    Older browsers don't recognize rgba, but you could use a dash of JS to make it work if you really care, although the fallback to white is better.

  3. #3
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    While this works, I still have the issue of the white box behind my submit button (image). Also, I need this functionality for radio buttons, check boxes and select drop downs.

    Thanks.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by tomsimon View Post
    I still have the issue of the white box behind my submit button (image).
    Not sure what you mean by that.

    I need this functionality for radio buttons, check boxes and select drop downs.
    These are much more difficult to style. You might be better of resorting to JavaScript for something like that. If you Google "jQuery forms" or something like that, you'll see some nice examples of very fancy forms that you can't reliably do with just HTML and CSS.

  5. #5
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    [QUOTE=ralph.m;5179945]Not sure what you mean by that.


    Sample attached.2.png

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    If you don't want the styles for the submit button, then lock it out. Change this

    Code:
    input, textarea {font-size: 1em; width: 20em;font-family: arial; border: none;padding: 2px; background: rgba(255,255,255,0.5);}
    to this:

    Code:
    input[type="text"], textarea {font-size: 1em; width: 20em;font-family: arial; border: none;padding: 2px; background: rgba(255,255,255,0.5);}
    That just stops the styles for text inputs from affecting the styles of the submit button.

  7. #7
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    If you don't want the styles for the submit button, then lock it out. Change this

    Code:
    input, textarea {font-size: 1em; width: 20em;font-family: arial; border: none;padding: 2px; background: rgba(255,255,255,0.5);}
    to this:

    Code:
    input[type="text"], textarea {font-size: 1em; width: 20em;font-family: arial; border: none;padding: 2px; background: rgba(255,255,255,0.5);}
    That just stops the styles for text inputs from affecting the styles of the submit button.
    Very cool. I didn't even know you could do that. Thanks.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by tomsimon View Post
    Very cool. I didn't even know you could do that. Thanks.
    Yes, it's very handy. There are some really cool things you can do with CSS—even CSS2.


Tags for this Thread

Bookmarks

Posting Permissions

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