تعرف انك ممكن تعمل Validation على الـInput من خلال الـCSS بس؟ يعني تتأكد إذا كان الـInput ده جواه الداتا الصحيحة اللي انت محتاجها ولا لأ من خلال الـCSS! اه والله مش مصدق ليه؟
بص هو الموضوع ما زال Limited وماتقدرش تتأكد غير إذا كان الـInput اللي الـType بتاعه Number الـValue بتاعته ما زالت أعلى من الـMin وأقل من الـMax ولا لأ، ولكن خير أكيد حاجة زي دي هتكون مفيدة في يوم من الأيام، وده كله بيتحقق من خلال الـin-range والـout-of-range.
ببساطة دي Pseudo Classes بتقدر من خلالها تدي Style للـInput لو الـNumber اللي جواه ما زال صحيح (ما بين الـMin والـMax)، والتانية عكسها بتديله Style لو تجاوز الـMax أو بقى أقل من الـMin
الكود بسيط زي ما انت شايف في الصورة، وكالعادة في أول كومنت هسيبلك لينك تقدر تجرب الموضوع بنفسك، ومش هرغي كتير لأن البوست خلص هنا، الـPseudo Classes دي مدعومة من كل المتصفحات ماعدا العاق Internet Explorer ولكن مش مهم يعني محدش بيستخدمه خلاص 😂
وبس كدة، ده الموضوع ببساطة.
الجينيص
CSS Notes
الجينيص