Pretty Form Input

This is part of a styled input form. It uses CSS3 rounded corners.

This is the input form in IE. Not as pretty, but still nice.

This is the CSS used:

input.inputbox, textarea.inputbox {
input.inputbox, textarea.inputbox {
	background-color: #fff; /* change the color */
	border-top: 2px solid #ccc;
	border-left: 2px solid #ccc;
	border-right: 2px solid #888;
	border-bottom: 2px solid #888;
	border-radius: 5px;
	-khtml-border-radius: 5px;
        -moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	margin: 0 0 5px 0;
	overflow: hidden;
	padding: 2px 0 0 2px;
	width: 270px;
	}
input.inputbox {height: 20px; line-height: 20px;}

Edit: Added

-khtml-border-radius: 5px;

- somehow lost it.

Code for rounded corners & box shadow

Here is the code.  Class=contentbox was added to all the classes needing rounded corners and shadows.

<div class="box600 contentbox">

Full “.contentbox” code:

.contentbox {
border-top: 1px solid #fff;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
border-left: 1px solid #fff;
/* End White border */
-khtml-border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
/* End Rounded corners */
-moz-box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.9);
-webkit-box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.9);
box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.9);
/* End Box shadow */
}

Transparent Background

The black transparent backgrounds for the site below were done using the CSS3 rgba property. rgba was also used for link hover states and for the footer background.

background: transparent url(RWImages/blkbkgnd.png); /* IE 7 & 8 */
_background: #000; /* IE 6 and below */
background: rgba(0, 0, 0, 0.8); /* All other browsers */

It was easier to get background transparency and text with no transparency to work with a 10px transparent black png for IE than to use the proprietary IE filters. For IE 6,  iepngfix.htc from http://www.twinhelix.com was used for the header and link pngs, but the pages were slow loading when used for the background, so the background for IE6 is not transparent. It still looks good though. Progressive enhancement really does work, as long as you don’t mind a different look for IE and other browsers.