كيفية تغيير الخط في حقل الإدخال

يعد حقل الإدخال أحد العناصر الرئيسية لنماذج الويب ، والذي يسمح للمستخدم بإدخال البيانات على صفحة الويب. بشكل افتراضي ، يحتوي النص الموجود في حقل الإدخال على خط قياسي ، ولكن في بعض الأحيان تحتاج إلى تغييره وفقا لمتطلبات التصميم أو المشروع.

هناك طرق مختلفة لتغيير الخط في حقل الإدخال. واحد منهم هو استخدام كس. للقيام بذلك ، أضف قاعدة نمط لعنصر الإدخال عن طريق تحديد الخط المطلوب في خاصية عائلة الخط. على سبيل المثال:

المدخلات {

 الخط الأسرة: أريال ، بلا الرقيق;

}

في هذا المثال ، يتم تحديد الخط أريال ، وإذا كان هذا الخط غير متوفر ، سيتم استخدام خط بلا الرقيق (بلا الرقيق). يمكنك أيضا تعيين خصائص خط أخرى ، مثل الحجم واللون وما إلى ذلك.، لتخصيص مظهر النص في حقل الإدخال بشكل أكبر.

يمكنك أيضا استخدام فئات ومعرفات كس الخاصة لتغيير الخط فقط في حقول إدخال معينة إذا كنت بحاجة إلى إعدادات مختلفة لعناصر مختلفة. على سبيل المثال:

في هذه الحالة ، سيتم استخدام الخط روبوتو لحقول الإدخال التي تم تعيينها فئة" بلدي المدخلات " ، إذا كان هذا الخط هو متاح ، وإلا سيتم استخدام خط بلا الرقيق.

1. تغيير الخط في حقل الإدخال
2. الطرق التي تغير حجم الخط
3. تغيير لون الخط

تغيير الخط في حقل الإدخال

تحتوي صفحات الويب في البداية على خط قياسي في حقل الإدخال. ومع ذلك ، يمكنك بسهولة تغييره باستخدام كس.

أولا ، تحديد فئة كس لحقل الإدخال الخاص بك. يمكنك القيام بذلك عن طريق إضافة سمة الفئة بالاسم المطلوب إلى علامة الإدخال.

ثم ، في ملف كس الخاص بك أو في علامة النمط على الصفحة ، حدد النمط لهذه الفئة. لتغيير الخط ، استخدم خاصية عائلة الخط.

على سبيل المثال ، لتغيير الخط في حقل الإدخال إلى أريال ، يمكنك استخدام كس التالية:

المدخلات. بلدي المدخلات {

الخط الأسرة: أريال;

}

الإدخال الخاص بي هو الفئة التي أضفتها إلى علامة الإدخال.

يمكنك أيضا تحديد خطوط متعددة عن طريق فصلها بفاصلة. سيستخدم المتصفح أول خط متاح في القائمة.

بعد تعيين النمط ، سيتم عرض حقل الإدخال مع هذه الفئة بالخط المحدد.

لاحظ أنه لتطبيق التغييرات ، يجب توصيل النمط بصفحة الويب الخاصة بك عن طريق إضافته داخل علامة الرأس أو عن طريق توصيل ملف كس خارجي.

الآن أنت تعرف كيفية تغيير الخط في حقل الإدخال باستخدام كس.

الطرق التي تغير حجم الخط

هناك عدة طرق لتغيير حجم الخط في حقل الإدخال:

1. استخدام خاصية حجم الخط المغلق:

يمكنك تطبيق الأنماط على حقل الإدخال باستخدام كس وتعيين حجم الخط المطلوب باستخدام خاصية حجم الخط.

مثال:

2. باستخدام سمة الحجم:

يحتوي عنصر إدخال هتمل على سمة الحجم ، والتي تحدد عدد الأحرف التي سيتم عرضها في حقل الإدخال حسب العرض. يمكن أن يؤدي تعيين قيمة سمة الحجم إلى تغيير حجم الخط بصريا.

مثال:

3. باستخدام سمة النمط:

يمكنك أيضا تعيين حجم الخط مباشرة في رمز هتمل باستخدام سمة النمط وتعيين القيمة المطلوبة لخاصية حجم الخط.

مثال:

4. باستخدام جافا سكريبت:

باستخدام جافا سكريبت ، يمكنك تغيير حجم الخط ديناميكيا في حقل الإدخال بناء على إجراءات المستخدم. على سبيل المثال ، يمكنك الرد على حدث تغيير قيمة الحقل وتغيير حجم الخط باستخدام النمط.طريقة فونتسيزي.

مثال:

كل طريقة من هذه الطرق لها مزاياها وعيوبها ، ويعتمد اختيار طريقة معينة على المهمة المحددة والنتيجة المرجوة.

تغيير لون الخط

لتغيير لون الخط في حقل الإدخال ، يمكنك استخدام خاصية لون كس. تتيح لك هذه الخاصية تعيين لون النص في حقل الإدخال.

مثال الاستخدام:

• ملف كس الخارجي:
• الداخلية كس نمط:
• نمط مضمنة:

في هذه الأمثلة ، سيكون النص الموجود في حقل الإدخال باللون الأحمر.