के साथ इनपुट और फ्लोट लेबल मुझे इनपुट टैग के साथ समस्या है और इसकी फ्लोट लेबल है। सब कुछ ठीक से पढ़ता है, लेकिन जब मैं इनपुट में एक पैटर्न डालता हूं, तो यह पैटर्न प्रभाव फ्लोट से संतुष्ट नहीं है, और लेबल इनपुट लेबल के साथ ओवरलैप हो जाता है। मुझे उम्मीद है कि मैं स्पष्ट था, मेरी अंग्रेजी के लिए खेद है।पैटर्न
इससीएसएस
.card .input-container {
position: relative;
margin: 0 60px 50px;
}
.card .input-container input {
outline: none;
z-index: 1;
position: relative;
background: none;
width: 100%;
height: 60px;
border: 0;
color: #212121;
font-size: 24px;
font-weight: 400;
}
.card .input-container input:focus ~ label {
color: #9d9d9d;
-webkit-transform: translate(-12%, -50%) scale(0.75);
transform: translate(-12%, -50%) scale(0.75);
}
.card .input-container input:focus ~ .bar:before, .card .input-container input:focus ~ .bar:after {
width: 50%;
}
.card .input-container input:valid ~ label {
color: #9d9d9d;
-webkit-transform: translate(-12%, -50%) scale(0.75);
transform: translate(-12%, -50%) scale(0.75);
}
.card .input-container label {
position: absolute;
top: 0;
left: 0;
color: #757575;
font-size: 24px;
font-weight: 300;
line-height: 60px;
-webkit-transition: 0.2s ease;
transition: 0.2s ease;
}
.card .input-container .bar {
position: absolute;
left: 0;
bottom: 0;
background: #757575;
width: 100%;
height: 1px;
}
.card .input-container .bar:before, .card .input-container .bar:after {
content: '';
position: absolute;
background: #ed2553;
width: 0;
height: 2px;
-webkit-transition: .2s ease;
transition: .2s ease;
}
.card .input-container .bar:before {
left: 50%;
}
.card .input-container .bar:after {
right: 50%;
}
<div class="card">
<h1 class="title">Login</h1>
<form>
<div class="input-container">
<input type="text" id="Username" required="required" pattern=".{3,}" title="3 characters minimum" />
<label for="Username">Username</label>
<div class="bar"></div>
</div>
</form>
</div>
यह वास्तव में अच्छा है जब मैं इनपुट कुछ लग रहा है। मुद्दा वास्तव में क्या है? क्या आप कृपया पुन: उत्पन्न करने के लिए कदम बता सकते हैं? –
इनपुट में 3 से कम वर्ण जोड़ें, तो इनपुट को बाहर करने के लिए इनपुट के बाहर क्लिक करें जो मुझे लगता है कि ओपी बात कर रहा है। इनपुट ओवरलैप से लेबल और मान देता है। –
ठीक है, अभी पता चला है कि यदि आप '/' इसे ओवरलैप करते हैं, क्योंकि यह मान्य नहीं है। –