title: css <input> transparent + background image?
body: <p><img src="https://i.stack.imgur.com/wDd2P.png" alt="User login"></p>
  
  <p>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?</p>
  
  <p>My code:</p>
  
  <p>CSS rules:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;div id="someid"&gt;
                      &lt;div class="box" id="login" style="width: 326px; height: 228px; background-image: url('images/loginBox.png');"&gt;
                          &lt;form name="login" action="" method="post"&gt;
                          &lt;fieldset&gt;
                              &lt;input name="username" type="text" style="position:inherit; margin-top: 100px; margin-left:170px; width: 100px; color: white;" /&gt;
                              &lt;input name="password" type="password" style="position: relative; margin-top: 19px; margin-left:170px; width: 100px; color: white;" /&gt; 
                              &lt;input type="submit" value="Login" style="position: relative; margin-top: 17px; margin-left:5px;" /&gt;
                          &lt;/fieldset&gt; 
                          &lt;/form&gt;
                      &lt;/div&gt;
  
                      &lt;div class="box" id="register" style="width: 326px; height: 300px; background-image: url('images/registerBox.png');"&gt;
                          &lt;form name="register" action="" method="post"&gt;
                          &lt;fieldset&gt;  
  
                              &lt;input name="username" type="text" style="position:inherit; margin-top: 8.4em; margin-left:170px; width: 100px; color: white;" /&gt;
                              &lt;input name="password" type="password" style="position: relative; margin-top: 1.9em; margin-left:170px; width: 100px; color: white;" /&gt;
                              &lt;input name="mail" type="text" style="position: relative; margin-top: 1.6em; margin-left:170px; width: 100px; color: white;" /&gt; 
                              &lt;input name="name" type="text" style="position: relative; margin-top: 1.8em; margin-left:170px; width: 100px; color: white;" /&gt;
                              &lt;input type="submit" value="Registar" style="position: relative; margin-top: 1.2em; margin-left:5px;"/&gt;
  
                          &lt;/fieldset&gt; 
  
                          &lt;/form&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
  </code></pre>
  
  <p>Thank you all as always.</p>