在“聯系人”表單中輸入無效的電子郵件地址后，電子郵件跨度下降

Question

我怎樣才能讓“電子郵件”跨度保持在粉紅色的頂部

 .contactt{ position: relative; padding: 50px 100px; display: flex; justify-content: center; align-items: center; flex-direction: column; }.container{ width: 100%; display: flex; justify-content: center; align-items: center; }.contactFormm{ width: 40%; padding: 40px; background: #fff; }.contactFormm.inputBox { position: relative; width: 100%; margin-top: 10px; }.contactFormm.inputBox input, .contactFormm.inputBox textarea{ width: 100%; padding: 5px 0; font-size: 16px; margin: 10px 0px; border: none; border-bottom: 2px solid #333; outline: none; resize: none; }.contactFormm.inputBox span{ left: 0; position: absolute; padding: 5px 0; font-size: 16px; margin: 10px 0px; pointer-events: none; transition: 0.5s; color: #666; }.contactFormm.inputBox input:focus ~ span, .contactFormm.inputBox input:valid ~ span, .contactFormm.inputBox textarea:focus ~ span, .contactFormm.inputBox textarea:valid ~ span{ color: #e91e63; font-size: 12px; transform: translateY(-20px); }

 <main class='contactt container'> <div class='contactFormm'> <form> <h1>Contact form</h1> <div class='inputBox'> <input type="email" name='' required='required'> <span>E-mail</span> </div> <div class='inputBox'> <input type="text" name='' required='required'> <span>Name</span> </div> <div class='inputBox'> <input type="text" name='' required='required'> <span>Subject</span> </div> <div class='inputBox'> <textarea required='required'></textarea> <span>Type your Message...</span> </div> <div class='inputBox'> <input type='submit' name='' value='Send'> </div> </form> </div> </main>

? 還有什么我可以用來代替“有效”的嗎？ 我知道“電子郵件”跨度下降，因為它不是有效的電子郵件，但即使有人寫了無效的電子郵件，我希望它在頂部仍然是粉紅色的，但同時，當我按“發送”時按鈕我想讓 chrome 說它無效。請查看我的代碼，也許你可以

當我在下一個框中寫 'dhdhd' <- invalid e-mail 和 go 時，粉紅色的 'E-mail' 跨度下降並變成灰色。 它只有在我寫有效的電子郵件時才有效，例如“dfghj@gmail.com”，但我仍然希望這個“電子郵件”跨度保持在頂部，即使它是無效的

Answer 1

你可以使用:invalid偽類，它會起作用，盡管我認為它會一直顯示為粉紅色。 我認為如果不使用 JavaScript 除非您以input[value=""]目標（即空輸入），否則您無法實現您想要的結果。

請注意，您應該使用適當的<label>元素並將其與字段相關聯以實現可訪問性。