テキストフィールドが無効になると、ラベル遷移が元に戻されます

テキストフィールドのような素材を作成していますが、入力フィールドを無効にした場合を除いて動作します。フィールドにフォーカスが置かれると、テキストボックスに入力があれば、ラベルはカーソルの上にとどまります。テキストボックスを無効にすると、ボックスにテキストがある場合でもラベルは元の位置に戻ります（See the fiddle）。テキストフィールドが無効になると、ラベル遷移が元に戻されます

あなたが disabled CSSを宣言している

.txt-group label { 
    font-size: 18px; 
    font-weight: normal; 
    position: absolute; 
    pointer-events: none; 
    left: 10px; 
    top: 10px; 
    transition: all 0.2s ease-in-out; 
    color: #999999; 
} 

.txt-group input:focus ~ label, 
.txt-group input:valid ~ label, 
.txt-group input:valid:disabled ~ label { 
    top: -8px; 
    font-size: 14px; 
}

出典

2016-12-02 Get Off My Lawn

作業

.txt-group input:focus ~ label, .txt-group input:valid ~ label, .txt-group input:disabled ~ label { top: -8px; font-size: 14px; }

：

はこれを試してみてください。 –

このソリューションにはJavaScriptが必要な場合があります。私が知る限り、 'input'に内容があれば' valid： 'がCSSでテストする唯一の方法ですが、要素に' readonly'または 'disabled'属性があればテストは終了します。 –

、あなたにもvalidセレクターを必要はありません。ここで

は私がやっているものです。問題自体ではなく、サードパーティのサイトで[MCVE]に関連するすべてのコードを入力してくださいJSFiddle

出典

2016-12-02 17:37:06

このメソッドは、無効な 'input'フィールドが空であっても、ラベルを" completed "状態にシフトします。 –

@JonUleisああ、あなたが正しいです。私の間違い！テキストが入っていれば、私はちょうどそれをテキスト化しました。 –

テキストフィールドが無効になると、ラベル遷移が元に戻されます

答えて

関連する問題