入力フィールドにフローティングラベルがあり、jsなしで必須の属性なしで

Question

入力フィールドにフローティングラベルを作成しました。クロムビューでは正常に動作していますが、mozilla Firefoxで正しく表示されません。コードを書いてください。 注：javascriptなしで、入力フィールドに必須の属性がないことをお勧めします。私のコードは

.has-float-label 
 
{ 
 
    position:relative 
 
} 
 
.has-float-label label 
 
{ 
 
    position:absolute; 
 
    left:0;top:0; 
 
    cursor:text; 
 
    font-size:75%; 
 
    opacity:1; 
 
    -webkit-transition:all .2s; 
 
    transition:all .2s 
 
} 
 
.has-float-label select 
 
{ 
 
    -webkit-appearance:none; 
 
    -moz-appearance:none; 
 
    appearance:none 
 
} 
 
.has-float-label .form-control 
 
{ 
 
    font-size:inherit; 
 
    padding-top:1em; 
 
    margin-bottom:2px; 
 
    border:0; 
 
    border-radius:0; 
 
    background:0 0; 
 
    border-bottom:2px solid rgba(0,0,0,.1) 
 
} 
 
.has-float-label .form-control::-webkit-input-placeholder 
 
{ 
 
    opacity:1; 
 
    -webkit-transition:all .2s; 
 
    transition:all .2s 
 
} 
 
.has-float-label .form-control::-moz-input-placeholder 
 
{ 
 
    opacity:1; 
 
    -moz-transition:all .2s; 
 
    transition:all .2s 
 
} 
 

 
.has-float-label .form-control:placeholder-shown:not(:focus)::-webkit-input-placeholder 
 
{ 
 
    opacity:0 
 
} 
 

 
.has-float-label .form-control:placeholder-shown:not(:focus)::-moz-input-placeholder 
 
{ 
 
    opacity:0 
 
} 
 

 
.has-float-label .form-control:placeholder-shown:not(:focus)+label 
 
{ 
 
    font-size:150%; 
 
    opacity:.5; 
 
    top:.25em 
 
} 
 
.has-float-label .form-control:focus 
 
{ 
 
    outline:0; 
 
    border-color:rgba(0,0,0,.5) 
 
} 
 
.input-group .has-float-label 
 
{ 
 
    display:inline-block 
 
}

<div class="form-group has-float-label"> 
 
    <input class="form-control" id="first" type="text" placeholder="First Last"/> 
 
    <label for="first">Name</label> 
 
    </div>

Answer 1

まず装着されている

、我々はそれを必要としないよう、コードからselect CSSセレクタに対応し、すべてのスタイルを削除します。セレクタ.has-float-label、.has-float-label label、および.has-float-label .form-controlは、達成しようとしているものとは関係がないため、変更されません。

今すぐ主要部分に。

.has-float-label .form-control::-webkit-input-placeholder 
.has-float-label .form-control::-moz-placeholder 
.has-float-label .form-control:-ms-input-placeholder 
.has-float-label .form-control::placeholder 

::placeholder擬似要素（DOMには本当にない目に見えるもの）私たちは（それが実際のプレースホルダーテキストをラップ）プレースホルダーテキストのスタイルを設定することができます。この場合、ユーザが入力をクリックしたときに滑らかな遷移を行うために、transitionプロパティを追加します。

私たちはコードをより標準に準拠させるため、プラットフォーム固有のセレクタ（SafariとChromeでは-webkit-、Firefoxでは-moz-、Internet Explorerでは-ms-）を使用します。

::placeholderセレクタは、主要なCSS標準の一部ではありません。同じ理由で-webkit-プラットフォームネイティブセレクタも追加しました。

.has-float-label .form-control:placeholder-shown:not(:focus)::-webkit-input-placeholder 
.has-float-label .form-control:placeholder-shown:not(:focus)::-moz-placeholder 
.has-float-label .form-control:placeholder-shown:not(:focus):-ms-input-placeholder 
.has-float-label .form-control:placeholder-shown:not(:focus)::placeholder 

上記セレクタは非常に興味深いものです。

placeholder-shown擬似クラスは、プレースホルダテキストが表示されているときに<input>を選択します。

not(:focus)は、CSS3セレクタが、:focusでないすべての要素に一致します。これにより、カーソルがinput要素の内部にないときに、プレースホルダテキストを非表示にし、ラベルのみを表示することができます。

placeholderが、これと同じ理由で再び使用されます。値が0のopacityプロパティはプレースホルダテキストを非表示にします。

最後に、.has-float-label .form-control:placeholder-shown:not(:focus) + *は、ラベルを先頭に移動します。

.has-float-label { 
 
    position: relative; 
 
} 
 
.has-float-label label { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    cursor: text; 
 
    font-size: 75%; 
 
    opacity: 1; 
 
    -webkit-transition: all .2s; 
 
    transition: all .2s; 
 
} 
 

 
.has-float-label .form-control { 
 
font-size:inherit; 
 
    padding-top:1em; 
 
    margin-bottom:2px; 
 
    border:0; 
 
    border-radius:0; 
 
    background:0 0; 
 
    border-bottom:2px solid rgba(0,0,0,.1) 
 
} 
 
.has-float-label .form-control::-webkit-input-placeholder { 
 
    -webkit-transition: all .2s; 
 
    transition: all .2s; 
 
} 
 
.has-float-label .form-control::-moz-placeholder { 
 
    -webkit-transition: all .2s; 
 
    transition: all .2s; 
 
} 
 
.has-float-label .form-control:-ms-input-placeholder { 
 
    -webkit-transition: all .2s; 
 
    transition: all .2s; 
 
} 
 
.has-float-label .form-control::placeholder { 
 
    -webkit-transition: all .2s; 
 
    transition: all .2s; 
 
} 
 
.has-float-label .form-control:placeholder-shown:not(:focus)::-webkit-input-placeholder { 
 
    opacity: 0; 
 
} 
 
.has-float-label .form-control:placeholder-shown:not(:focus)::-moz-placeholder { 
 
    opacity: 0; 
 
} 
 
.has-float-label .form-control:placeholder-shown:not(:focus):-ms-input-placeholder { 
 
    opacity: 0; 
 
} 
 
.has-float-label .form-control:placeholder-shown:not(:focus)::placeholder { 
 
    opacity: 0; 
 
} 
 
.has-float-label .form-control:placeholder-shown:not(:focus) + * { 
 
    font-size: 150%; 
 
    opacity: .5; 
 
    top: .25em; 
 
} 
 
.has-float-label .form-control:focus { 
 
    outline: none; 
 
    border-color: rgba(0, 0, 0, 0.5); 
 
}

<div class="form-group has-float-label"> 
 
    <input class="form-control" id="first" type="text" placeholder="First Last"/> 
 
    <label for="first">Name</label> 
 
    </div>

注：上記のコードは、エッジでは動作しません。動作させるには、次のように変更してください：

/* Remove this */ 
/* has-float-label .form-control:placeholder-shown:not(:focus)::placeholder { 
* opacity: 0; 
* } 
*/ 
/* Add the following lines */ 

.has-float-label .form-control:not(:focus)::-ms-input-placeholder { 
    opacity: 0; 
}