專案在這里-> https://play.tai??lwindcss.com/udQSLuVwHa
當我在 InputField 內單擊時（不要直接單擊用戶名標簽），標簽會正確縮小。如果我點擊輸入欄位（使其失去焦點），標簽會再次變大。現在，如果我在 InputField 中鍵入一些文本并使其失去焦點，則用戶名標簽不應縮小，而是保持在頂部。
我已經注釋掉了應該作業的 CSS。我的 CSS 有問題嗎？而不是順風？
uj5u.com熱心網友回復：
嘗試選擇label當它的兄弟input不顯示占位符時input:not(:placeholder-shown) label，這是您使用新選擇器的樣式：
.outline:focus-within label,
input:not(:placeholder-shown) label {
background-color: white;
transform: scale(0.75) translateY(-1rem);
z-index: 0;
margin-left: 0.75rem;
padding-left: 0.25rem;
padding-right: 0.25rem;
padding-top: 0px;
padding-bottom: 0px;
}
uj5u.com熱心網友回復：
Saeed 的回答是一個很棒的 CSS 解決方案。
如果您想在 JavaScript 中解決這個問題，您可以執行以下操作：
（當您運行代碼片段時，注意樣式看起來會有所不同，因為不存在順風）
inputUsername = document.getElementById('inputUsername');
labelUsername = document.getElementById('labelUsername');
inputUsername.onfocus = () => {
labelUsername.classList.add('outline');
}
inputUsername.onblur = () => {
if (inputUsername.value.length == 0){
labelUsername.classList.remove('outline');
}
}.outline {
background-color: white;
transform: scale(0.75) translateY(-1rem);
z-index: 0;
margin-left: 0.75rem;
padding-left: 0.25rem;
padding-right: 0.25rem;
padding-top: 0px;
padding-bottom: 0px;
}<div class="outline relative border-2 focus-within:border-blue-500">
<input id="inputUsername" class="bg-red-700 block p-4 w-full text-lg appearance-none bg-transparent" placeholder=" " type="text" />
<label id="labelUsername" for="username" class="absolute top-0 text-lg bg-white p-4 -z-1 duration-300 origin-0">Username</label>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/406460.html
標籤：
上一篇：最大內容的價值是什么？