Wie Platzhalter-Text nicht perfekt in Firefox

Question

arbeitet Ich mag den folgenden Link tun wollte:

JS Fiddle

Wenn ich in einem anderen Browser (Chrome und IE) getestet, es funktioniert gut (der Text ist Stick in der Textbox, wenn ich die Größe des Browserbildschirms ändere).

Aber wenn es um das Firefox geht, ist alles durcheinander, so dass ich die CSS-Hacks nur für Firefox verwendet.

Alles funktioniert, weil ich Media-Abfrage und spielen mit der Position, die nur für firefox galt.

Aber wenn es um den kleineren Bildschirm geht (weniger als 768px), blieb der Text nicht auf der linken Seite, stattdessen ist es auf der rechten Seite und folgt der Bildschirmgröße.

Sie können es auf den folgenden Link testen:

Bootply

Hier ist der Code selbst:

HTML:

<div class="container-fluid"> 
     <div class="container"> 
      <div class="row padding-row"> 
       <img class="img-responsive pull-left center-img" src="http://icons.iconarchive.com/icons/uiconstock/e-commerce/128/E-Commerce-Icon-Set-icon.png"> 
       <h2 class="text-center">My Website</h2> 
      </div> 
      <div class="form-group input-group col-xs-12 col-sm-4 col-md-4 col-lg-4"> 
       <span class="input-group-addon"><i class="fa fa-user"></i></span> 
       <label class="control-label" for="txtUsername">Username</label> 
       <input id="txtUsername" class="form-control" type="text"> 
      </div> 
      <div class="form-group input-group col-xs-12 col-sm-4 col-md-4 col-lg-4"> 
       <span class="input-group-addon"><i class="fa fa-key"></i></span> 
       <label class="control-label" for="txtPassword">Password</label> 
       <input id="txtPassword" class="form-control" type="password"> 
      </div> 
      <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> 
       <button id="btnSubmit" class="btn btn-default form-control" data-toggle="popover" data-content="Submit">Log In</button> 
      </div> 
     </div> 
    </div> 

CSS:

/* ---- REGION GENERAL ---- BEGIN */ 

body { 
    background-color: #292929; 
    font-size: 14px; 
    font-family: Roboto, sans-serif; 
    font-weight: 400; 
    color: white; 
} 

div[class*="col-"] { 
    padding-right: 0px; 
} 

.input-group[class*="col-"] { 
    float: left; 
    padding: 0 0 0 15px; 
} 

.input-group-addon { 
    min-width: 40px; 
} 

.form-control { 
    height: 40px; 
    align-self: flex-end; 
} 

.control-label { 
    font-size: 14px; 
    font-weight: 400; 
    opacity: .6; 
    pointer-events: none; 
    position: absolute; 
    transform: translate3d(10px, 10px, 0px) scale(1); 
    transform-origin: left top; 
    transition: 300ms; 
    z-index: 999; 
    color: black; 
} 

.form-group.focused .control-label { 
    transform: translate3d(10px, 0px, 0px) scale(.75); 
    z-index: 998; 
} 

.popover-content { 
    color: black; 
} 

@-moz-document url-prefix() { 
    .control-label { 
     float: left; 
     transform: translate3d(-225px, 10px, 0px) scale(1); 
    } 

    .form-group.focused .control-label { 
     float: left; 
     transform: translate3d(-225px, 0px, 0px) scale(.75); 
    } 
} 

@media only screen and (min-width: 768px) { 
    @-moz-document url-prefix() { 
     .control-label { 
      margin-left: 50px; 
     } 

     .form-group.focused .control-label { 
      margin-left: 50px; 
     } 
    } 
} 

@media only screen and (min-width: 992px) { 
    @-moz-document url-prefix() { 
     .control-label { 
      margin-left: -20px; 
     } 

     .form-group.focused .control-label { 
      margin-left: -20px; 
     } 
    } 
} 

@media only screen and (min-width: 1200px) { 
    @-moz-document url-prefix() { 
     .control-label { 
      margin-left: -90px; 
     } 

     .form-group.focused .control-label { 
      margin-left: -90px; 
     } 
    } 
} 

/* ---- REGION GENERAL ---- END */ 

/* ---- REGION LOGIN PAGE ---- BEGIN */ 

.padding-row { 
    padding-bottom: 20px; 
} 

.center-img { 
    margin-top: 20px; 
} 

@media only screen and (min-width: 383px) { 
    .center-img { 
     margin-top: 0px; 
    } 
} 

/* ---- REGION LOGIN PAGE ---- END */ 

JS:

$(document).ready(function() { 
      $(window).resize(function() { 
       $('.container').css({ 
        position: 'absolute', 
        left: ($(window).width() - $('.container').outerWidth())/2, 
        top: ($(window).height() - $('.container').outerHeight())/2 
       }); 
      }); 

      $(window).resize(); 

      $('.form-control').on('focus blur', function (e) { 
       $(this).parents('.form-group').toggleClass('focused', (e.type === 'focus' || this.value.length > 0)); 
       }).trigger('blur'); 
     }) 

Ihre Antwort sehr geschätzt.

Vielen Dank.

Answer 1

Da die CSS für Browser anders ist, sollten wir Browser-spezifisch gehen. Fügen Sie dies zu Ihrem CSS.

input:focus:-moz-placeholder { color:transparent; } /* Firefox 18- */ 
input:focus::-moz-placeholder { color:transparent; } /* Firefox 19+ */ 

Answer 2

Sie können Platzhalter nur mithilfe von CSS bearbeiten. Es wäre am besten, wenn Sie die nativen Platzhalter anstelle von Beschriftungen als Platzhalter verwenden.

::-webkit-input-placeholder, 
    :-moz-placeholder, 
    ::-moz-placeholder, 
    :-ms-input-placeholder { 
     /* Styles */ 
    } 

Dies funktioniert in verschiedenen Browsern. Und dann wickeln Sie es einfach in Medienabfragen für verschiedene Bildschirmgrößen ein.

Auch in Transformationen.

-webkit-transform: 
-moz-transform: /* firefox */ 
-ms-transform: 
-o-transform: 

Zum Beispiel

.control-label { 
    font-size: 14px; 
    font-weight: 400; 
    opacity: .6; 
    pointer-events: none; 
    position: absolute; 
    transform: translate3d(10px, 10px, 0px) scale(1); 
    -webkit-transform: translate3d(10px, 10px, 0px) scale(1); 
    -moz-transform: translate3d(10px, 10px, 0px) scale(1); 
    -ms-transform: translate3d(10px, 10px, 0px) scale(1); 
    -o-transform: translate3d(10px, 10px, 0px) scale(1); 
    transform-origin: left top; 
    -webkit-transform-origin: left top; 
    -moz-transform-origin: left top; 
    -ms-transform-origin: left top; 
    -o-transform-origin: left top; 
    transition: 300ms; 
    z-index: 999; 
    color: black; 
}