Creating semi-transparent input fields

**tomsimon** · Sep 3, 2012 15:30

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

**ralph.m** · Sep 3, 2012 16:07

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.

**tomsimon** · Sep 3, 2012 16:22

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.

**ralph.m** · Sep 3, 2012 16:26

Originally Posted by tomsimon

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.

**tomsimon** · Sep 4, 2012 10:56

[QUOTE=ralph.m;5179945]Not sure what you mean by that.

Sample attached.2.png

**ralph.m** · Sep 4, 2012 15:47

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.

**tomsimon** · Sep 4, 2012 17:50

Originally Posted by ralph.m

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.

**ralph.m** · Sep 4, 2012 18:57

Originally Posted by tomsimon

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.

User Tag List

Thread: Creating semi-transparent input fields

Thread Tools

Display

Creating semi-transparent input fields

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions