Creating semi-transparent input fields

HTML & CSS
1

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/showthread.php?573819-Input-fileds-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

2

Hi tomsimon. Welcome to the forums. :slight_smile:

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

<!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

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

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

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

Sample attached.

6

If you don’t want the styles for the submit button, then lock it out. Change this

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

to this:

input[COLOR="#FF0000"][type="text"][/COLOR], 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

Very cool. I didn’t even know you could do that. Thanks.

8

Yes, it’s very handy. There are some really cool things you can do with CSS—even CSS2. :slight_smile: