輸入標題消失

Question

我有一個帶有佔位符的文本輸入。只要您點擊輸入，佔位符就會向上移動並保持爲標題。問題是，當我開始輸入時，標題消失。

.material-input-login { 
 
    margin: 8px 10px; 
 
    width: 200px; 
 
    /* display: block; */ 
 
    border: none; 
 
    padding: 10px 0; 
 
    border-bottom: solid 1px #fff; 
 
    -webkit-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1); 
 
    transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1); 
 
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 96%, #fff 4%); 
 
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #fff 4%); 
 
    background-position: -200px 0; 
 
    background-size: 200px 100%; 
 
    background-repeat: no-repeat; 
 
    color: #fff; 
 
} 
 
.material-input-login:focus, .material-input-login:valid { 
 
    box-shadow: none; 
 
    outline: none; 
 
    background-position: 0 0; 
 
} 
 
.material-input-login:focus::-webkit-input-placeholder, .material-input-login:valid::-webkit-input-placeholder { 
 
    color: #fff; 
 
    font-size: 11px; 
 
    -webkit-transform: translateY(-20px); 
 
    transform: translateY(-20px); 
 
    visibility: visible !important; 
 
} 
 
.material-input-login::-webkit-input-placeholder, .material-button { 
 
    -webkit-transition: all 0.3s ease-in-out; 
 
    transition: all 0.3s ease-in-out; 
 
}

<input id="searchBox" type="search" placeholder="Search" class="material-input-login" required="">

Answer 1

這是什麼使得它移動起來：

-webkit-transform: translateY(-20px); 
     transform: translateY(-20px); 

平移Y可以移動佔位符-20px以上。只要刪除它或更改數字，如果你想。

Answer 2

問題是，當你開始輸入時，佔位符消失 - 我不知道任何可以讓你避免這種行爲的CSS技巧。

我在做，其使用輸入標籤而不是替代了個去：

https://jsfiddle.net/zug5j8m5/

CSS：

body { 
    background: #333; 
} 

.material-input-login { 
    margin: 0 10px 8px; 
    width: 200px; 
    border: none; 
    padding: 10px 0; 
    border-bottom: solid 1px #fff; 
    -webkit-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1); 
    transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1); 
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 96%, #fff 4%); 
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #fff 4%); 
    background-position: -200px 0; 
    background-size: 200px 100%; 
    background-repeat: no-repeat; 
    color: #fff; 
} 

.material-input-login:focus, .material-input-login:valid { 
    box-shadow: none; 
    outline: none; 
    background-position: 0 0; 
} 

.label { 
    color: #fff; 
    display: block; 
    font-family: sans-serif; 
    font-size: 13px; 
    margin: 0 10px; 
    position: absolute; 
    -webkit-transform: translateY(-35px); 
      transform: translateY(-35px); 
    -webkit-transition: all 0.3s ease-in-out; 
    transition: all 0.3s ease-in-out; 
} 

.material-input-login:focus+.label { 
    color: #fff; 
    font-size: 11px; 
    -webkit-transform: translateY(-50px); 
      transform: translateY(-50px); 
    display:block !important; 
} 

HTML：

<input id="searchBox" type="search" title="Search" class="material-input-login" required=""> 
<label for="searchBox" class="label">Search</label>