محدد CSS لحقول إدخال النص؟

Question

كيف يمكنني استهداف حقول الإدخال من "النص" باستخدام محددات CSS؟

Answer 1

input[type=text]

أو لتقييد المدخلات النصية داخل النماذج

form input[type=text]

أو ، لتقييد نموذج معين ، على افتراض أنه يحتوي على معرف myForm

#myForm input[type=text]

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

المرجعي: http://www.w3.org/tr/css2/selector.html#attribute-selectors

---

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

input:not([type]), // type attribute not present in markup
input[type=""], // type attribute present, but empty
input[type=text] // type is explicitly defined as 'text'

لا يزال هذا يترك الحالة عند تعريف النوع ، ولكن له قيمة غير صالحة ولا تزال تراجع إلى type = "نص". لتغطية أنه يمكننا استخدام جميع المدخلات التي ليست واحدة من الأنواع الأخرى المعروفة

input:not([type=button]):not([type=password]):not([type=submit])...

لكن هذا المحدد سيكون سخيفًا جدًا وأيضًا قائمة الأنواع الممكنة ينمو مع ميزات جديدة تضاف إلى HTML.

لاحظ ال :not الفئة الزائفة مدعوم فقط بدءا من IE9.

Answer 2

يمكنك استخدام محدد السمة هنا:

input[type="text"] {
    font-family: Arial, sans-serif;
}

هذا مدعوم في IE7 وما فوق. يمكنك استخدام IE7.JS لإضافة دعم لهذا إذا كنت بحاجة إلى دعم IE6.

نرى: http://reference.sitepoint.com/css/attributeselector للمزيد من المعلومات

Answer 3

عادةً ما أستخدم المحددات في ورقة الأنماط الرئيسية ، ثم قم بعمل ملف .js (jQuery) المحدد IE6 الذي يضيف فئة إلى جميع أنواع الإدخال. مثال:

$(document).ready(function(){
  $("input[type='text']").addClass('text');
)};

ثم فقط تكرار أنماطي في ورقة الأنماط الخاصة بـ IE6 باستخدام الفصول. وبهذه الطريقة فإن الترميز الفعلي هو أنظف قليلاً.

Answer 4

يمكنك استخدام :text محدد لتحديد جميع المدخلات مع نص النوع

عمل كمان

$(document).ready(function () {
    $(":text").css({    //or $("input:text")
        'background': 'green',
        'color':'#fff'
    });
});

:text هو امتداد jQuery وليس جزءًا من مواصفات CSS ، والاستعلامات التي تستخدم: لا يمكن أن يستفيد النص من دفعة الأداء التي توفرها طريقة DOM QuerySelectorAll (). للحصول على أداء أفضل في المتصفحات الحديثة ، استخدم [type="text"] في حين أن. هذا سوف يعمل لصالح IE6+.

$("[type=text]").css({  // or $("input[type=text]")
    'background': 'green',
    'color':'#fff'
});

CSS

[type=text] // or input[type=text] 
{
    background: green;
}

Answer 5

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

.admin_table input[type=text]:focus
{
    background-color: #FEE5AC;
}

Answer 6

كما تم نشر Amir أعلاه ، فإن أفضل طريقة في الوقت الحاضر-المتصفح المتقاطع وتركها وراء IE6-هي الاستخدام

[type=text] {}

لم يذكر أحد خصوصية CSS أقل (لماذا هو الذي - التي مهم؟) حتى الآن، [type=text] الميزات 0،0،1،0 بدلاً من 0،0،1،1 مع input[type=text].

من ناحية الأداء ، لم يعد هناك تأثير سلبي على الإطلاق.

تطبيع v4.0.0 تم إصداره للتو مع انخفاض خصوصية المحدد.

Answer 7

مع محدد السمة ، نستهدف نص الإدخال في CSS

input[type=text] {
background:gold;
font-size:15px;
 }

Answer 8

الإدخال [type = text

سيؤدي ذلك إلى تحديد كل نص نوع الإدخال في صفحة ويب.

Answer 9

غالبًا ما يتم استخدام محددات السمات للمدخلات. هذه هي قائمة محددات السمات:

العنوان] يتم تحديد جميع العناصر مع سمة العنوان.

العنوان = الموز] جميع العناصر التي لها قيمة "الموز" لسمة العنوان.

العنوان ~ = الموز] جميع العناصر التي تحتوي على "موز" في قيمة سمة العنوان.

العنوان | = الموز] جميع العناصر التي تبدأ قيمة سمة العنوان بـ "الموز".

title^= banana] جميع العناصر التي تبدأ قيمة سمة العنوان تبدأ بـ 'Banana'.

العنوان $ = BANANA] جميع العناصر التي تنتهي قيمة سمة العنوان بـ "Banana".

العنوان*= الموز] جميع العناصر التي تحتوي على قيمة سمة العنوان تحتوي على "الموز" الفرعية.

المرجعي: https://kolosek.com/css-selectors/