تحديد عناصر <input> في CSS باستخدام صفات مختلفة

يمكنك تحديد أي خاصية، حيث أن الشكل العام لهذه الطريقة هو:

[attribute="value"]

أيضاً يمكنك تطبيق عمليات أخرى غير المساواة، مثلاً الاحتواء، أي تكون الخاصية تحتوي ما نريد و ليس تماماً ما نريد، يمكن تطبيق ذلك كما يلي:

[attribute~="value"]

إذا كان سؤالك يتعلق بأحد الدورات فأرجو التعليق أسفل فيديو الدورة المتعلق بالسؤال وطرح الأسئلة العامة هنا في قسم أسئلة البرمجة.

وبخصوص سؤالك، فتستطيع تحديد العناصر <input> في CSS باستخدام العديد من الخصائص المختلفة بالإضافة إلى type.

فالتحديد بواسطة type="password" يعني أنك تستهدف الحقول ذات النوع "password" فقط، وأيضًا بإمكانك استهداف العناصر <input> باستخدام أي صفة أخرى متوفرة في HTML.

مثال على ذلك، استهداف الحقول التي تحتوي على صفة required بالشكل التالي:

input[required] {
  border-color: red;
}

وهناك العديد من الصفات المختلفة التي يمكن استخدامها لتحديد العناصر <input>، مثل id و class و name وغيرها، وباستطاعتك استخدام هذه الصفات بدلاً من type لتحديد العناصر بطرق مختلفة.

مثلاً، استهداف الحقول ذات الـ id المحدد بالشكل التالي:

input#myInput {
  background-color: yellow;
}

أو يمكنك استهداف الحقول ذات الـ class المحددة بالشكل التالي:

input.myClass {
  font-weight: bold;
}

أي تستطيع تحديد العناصر <input> بواسطة العديد من الصفات المختلفة وليس فقط type.

وأنصحك بقراءة التالي:

• صفحات تصنيف «CSS Selectors» من موسوعة حسوب