css <input> transparent + background image?

Question

I've designed a login panel (photoshop) which basically acts as a background image (provides all the information necessary to the user). After that I decide to make transparent and , after that used CSS rules to match the objects with background image inputs. Well, the problem is that IE has a major bug and transparency won't work. With firefox, chrome, opera and safari transparency works but some of the input boxes move a bit from browser to browser! Anyway, I wonder if there is a proper way of doing this?

My code:

CSS rules:

.box {
    position: absolute; 
    top: 40%; 
    left: 38%;
    border: none;
}

.box fieldset {
    display:block;
    border-style: none;
}

.box input[type="text"], input[type="password"] {
    padding: 0px 5px 0px 5px;
    border-style: none;
    border-color: transparent;
    background-color: transparent;
    font-size:12px;
}

.box input[type="submit"] {
    filter:alpha(opacity=100);
    cursor: hand;
    border: 2px solid #FFFFFF;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    text-decoration:none;
    font-size:14px;
    font-weight:bold;
    height: 35px;
    width: 80px;
    color: white;
    background-color: #3E3E3E;
}

.box input[type="submit"]:hover{
    color: #3E3E3E;
    background-color: #CFC8C8;
    border: 2px solid #000000;
}

html:

<div id="someid">
                    <div class="box" id="login" style="width: 326px; height: 228px; background-image: url('images/loginBox.png');">
                        <form name="login" action="" method="post">
                        <fieldset>
                            <input name="username" type="text" style="position:inherit; margin-top: 100px; margin-left:170px; width: 100px; color: white;" />
                            <input name="password" type="password" style="position: relative; margin-top: 19px; margin-left:170px; width: 100px; color: white;" /> 
                            <input type="submit" value="Login" style="position: relative; margin-top: 17px; margin-left:5px;" />
                        </fieldset> 
                        </form>
                    </div>

                    <div class="box" id="register" style="width: 326px; height: 300px; background-image: url('images/registerBox.png');">
                        <form name="register" action="" method="post">
                        <fieldset>  

                            <input name="username" type="text" style="position:inherit; margin-top: 8.4em; margin-left:170px; width: 100px; color: white;" />
                            <input name="password" type="password" style="position: relative; margin-top: 1.9em; margin-left:170px; width: 100px; color: white;" />
                            <input name="mail" type="text" style="position: relative; margin-top: 1.6em; margin-left:170px; width: 100px; color: white;" /> 
                            <input name="name" type="text" style="position: relative; margin-top: 1.8em; margin-left:170px; width: 100px; color: white;" />
                            <input type="submit" value="Registar" style="position: relative; margin-top: 1.2em; margin-left:5px;"/>

                        </fieldset> 

                        </form>
                    </div>

                </div>

Thank you all as always.

Answer 1

Adding an image in the <input>:

FIDDLE

input[type=text].img {
    background-image: url(http://myrrix.com/wp-content/uploads/2012/06/stackoverflow.png);
    border: 1px solid #aaa;
    padding: 5px;
    padding-left: 20px;
    background-size: 10px 15px;
    background-repeat: no-repeat;
    background-position: 8px 6px;
    background:transparent;
}

Answer 2

Why not just slice out your field images and set them as the background of your fields? So you'd have something like:

input[type="text"] {
    background: transparent url(textfield.png) no-repeat center center;
    border: none;
}

That way you don't have to try lining things up with a image (which is a headache and kind of misses the point of modern development).

Answer 3

While the CSS3 opacity should work, it's not supported by IE.

Here's what you need to include transparency which works with virtually any browser. Some of these rules are ancient, so feel free to omit the ones you feel are vestigial:

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;