Как замещающий текст не работает отлично в Firefox

Question

Я хотел сделать как по следующей ссылке:

JS Fiddle

Когда я тестировал в других браузерах (хром и IE), он работает отлично (текст клюшка внутри текстового поля всякий раз, когда я изменяю размер экрана браузера).

Но когда дело доходит до firefox, все испорчено, поэтому я использовал хаки CSS, которые применяются только для Firefox.

Все работает, потому что я использовал медиа-запрос и играю с положением, которое применяется только для Firefox.

Но, когда дело доходит до меньшего экрана (меньше 768 пикселей), текст не прилипает к левой стороне, а лежит на правой стороне и соответствует размеру экрана.

Вы можете проверить его на ссылке ниже:

Bootply

Вот сам код:

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'); 
     }) 

Ваш ответ высоко ценится.

спасибо.

Answer 1

Поскольку css действует по-разному для браузеров, мы должны использовать браузер. Добавьте это к вашему css.

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

Answer 2

Вы можете манипулировать заполнителями только с помощью CSS. Было бы лучше, если бы вы использовали родные заполнители вместо ярлыков в качестве заполнителя.

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

Это будет работать в разных браузерах. А затем просто оберните его внутри медиа-запросов для разных размеров экрана.

Также в преобразованиях.

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

Например,

.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; 
}