फ्लोटिंग लेबल काम नहीं कर रहा है जब आवश्यक विशेषता

Question

मैंने नीचे दिए गए मेरे इनपुट में एक फ़्लोटिंग लेबल किया है। और यह ठीक काम कर रहा है। लेकिन जब मैं इनपुट के required फ़ील्ड को हटा देता हूं, तो फ़्लोटिंग लेबल काम नहीं कर रहा है (हालांकि मुझे required दायर करने की आवश्यकता नहीं है)। कृपया इस मुद्दे को हल करने के कुछ तरीकों का सुझाव दें।

input:focus~.floating-label, 
 
input:not(:focus):valid~.floating-label { 
 
    top: 6px; 
 
    bottom: 12px; 
 
    left: 20px; 
 
    font-size: 11px; 
 
    opacity: 1; 
 
} 
 

 
.floating-label { 
 
    position: absolute; 
 
    pointer-events: none; 
 
    left: 20px; 
 
    top: 18px; 
 
    text-transform: uppercase; 
 
    transition: 0.2s ease all; 
 
    color: #b2b2b2; 
 
}

<input type="text" id="floating_name" value="" required/> 
 
<span class="floating-label">Enter</span>

Answer 1

चयनकर्ता input:focus इनपुट का चयन करता है जब यह फोकस हो और चयनकर्ता input:not(:focus):valid इनपुट का चयन करता है, तो valid input विषय वस्तु नहीं हो।

ए जब आप required attribute उपयोग करें और यह किसी भी मान दर्ज नहीं है: जब खो फोकस फोकस और इससे पहले कि)

1:। कुछ भी नहीं है का चयन नहीं किया (मूल राज्य)

2) के बाद फोकस इनपुट अमान्य है और इसे input:focus के साथ चुना गया है।

बी जब आप required विशेषता निकालें:

1) फोकस से पहले input:not(:focus):valid साथ चयन करें।

2) फोकस के बाद input:focus के साथ चयन करें।

तो, इनपुट हमेशा के लिए चुना जाता है, और .floating-label मूल स्थिति पर वापस नहीं आ जाएगा।

अपने प्रश्न में, आप कहते हैं:

तो, input:not(:focus):valid~.floating-label हटाने "मैं आवश्यक दायर की जरूरत नहीं है"।

पूर्ण कोड:

input:focus ~ .floating-label { 
 
    top: 6px; 
 
    bottom: 12px; 
 
    left: 20px; 
 
    font-size: 11px; 
 
    opacity: 1; 
 
} 
 

 
.floating-label { 
 
position: absolute; 
 
pointer-events: none; 
 
left: 20px; 
 
top: 18px; 
 
text-transform: uppercase; 
 
transition: 0.2s ease all; 
 
color: #b2b2b2; 
 
}

<input type="text" id="floating_name" value=""> 
 
<span class="floating-label">Enter</span>

Answer 2

:valid चयनकर्ता केवल सीमाओं के साथ प्रपत्र तत्वों के लिए काम करता है। जब आप अपने सीएसएस का required भाग हटाते हैं तो अब लागू नहीं होता है। मैंने input:not(:focus):valid ~ .floating-label हटा दिया और यह फिर से काम करता है। ।

input:focus~.floating-label { 
 
    top: 6px; 
 
    bottom: 12px; 
 
    left: 20px; 
 
    font-size: 11px; 
 
    opacity: 1; 
 
} 
 

 
.floating-label { 
 
    position: absolute; 
 
    pointer-events: none; 
 
    left: 20px; 
 
    top: 18px; 
 
    text-transform: uppercase; 
 
    transition: 0.2s ease all; 
 
    color: #b2b2b2; 
 
}

<input type="text" id="floating_name" value="" /> 
 
<span class="floating-label">Enter</span>