पाठ इनपुट फ़ील्ड के लिए CSS चयनकर्ता?

371

मैं CSS चयनकर्ताओं का उपयोग करके 'टेक्स्ट' प्रकार के इनपुट क्षेत्रों को कैसे लक्षित कर सकता हूं?

— Yarin
स्रोत

674

input[type=text]

या, प्रपत्रों के अंदर पाठ इनपुट को प्रतिबंधित करने के लिए

form input[type=text]

या, एक निश्चित रूप से आगे प्रतिबंधित करने के लिए, यह मानते हुए कि यह आईडी है myForm

#myForm input[type=text]

सूचना: यह IE6 द्वारा समर्थित नहीं है, इसलिए यदि आप IE6 के लिए विकसित करना चाहते हैं या तो IE7.js का उपयोग करें (जैसा कि यी जियांग ने सुझाव दिया है) या अपने सभी पाठ इनपुट में कक्षाएं जोड़ना शुरू करें।

संदर्भ: 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'

फिर भी यह मामला तब छोड़ता है जब प्रकार परिभाषित किया जाता है, लेकिन एक अमान्य मान है और जो अभी भी टाइप = "पाठ" पर वापस आता है। कवर करने के लिए हम उन सभी इनपुटों का उपयोग कर सकते हैं जो अन्य ज्ञात प्रकारों में से एक नहीं हैं

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

लेकिन यह चयनकर्ता काफी हास्यास्पद होगा और एचटीएमएल में नई सुविधाओं को शामिल करने के साथ संभावित प्रकारों की सूची भी बढ़ रही है।

सूचना: :notछद्म वर्ग केवल IE9 के साथ शुरू करने का समर्थन करता है।

— अलिन पुरकारू
स्रोत

41

कुछ ट्यूटोरियल वेब साइट बल्कि तो वास्तविक मानक का हवाला देते हुए के लिए +1

— Šime Vidas

7

धन्यवाद। मैंने देखा कि लोग Google पर पहली चीज़ ... या w3schools का हवाला देते हैं।

— अलीन पुरकारू

हाँ, यह एक तरह का गुस्सा है

— that'sime Vidas

यह IE6 में काम करता है? एक क्रॉस-ब्राउज़र समाधान के लिए मैं कक्षाओं को जोड़ना पसंद करता हूं (.input-text, .input-submit, आदि) यह html विकास के लिए बेकार है, लेकिन यह सीएसएस और जावास्क्रिप्ट को थोड़ा अच्छा बनाता है।

— zzzzBov

1

@MubasharAhmad मैंने अपना उत्तर अपडेट कर दिया है और जैसा कि आप देख सकते हैं कि केवल IE9 से ऊपर के ब्राउज़रों को लक्षित करने पर एक वर्कअराउंड है।

— अलीन पुरकारू

37

आप यहां विशेषता चयनकर्ता का उपयोग कर सकते हैं:

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

यह IE7 और इसके बाद के संस्करण में समर्थित है। यदि आप IE6 का समर्थन करने की आवश्यकता है, तो आप इसके लिए समर्थन जोड़ने के लिए IE7.js का उपयोग कर सकते हैं ।

देख: अधिक जानकारी के लिए http://reference.sitepoint.com/css/attributeselector

— यी जियांग
स्रोत

ध्यान रखें, सही सामान्य फ़ॉन्ट-परिवार है sans-serif, नहीं san-serif।

— वोल्कर ई।

14

मैं आमतौर पर अपने मुख्य स्टाइलशीट में चयनकर्ताओं का उपयोग करता हूं, फिर एक ie6 विशिष्ट .js (jquery) फ़ाइल बनाता हूं जो सभी प्रकार के इनपुट में एक वर्ग जोड़ता है। उदाहरण:

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

और फिर कक्षाओं का उपयोग करते हुए ie6 विशिष्ट स्टाइलशीट में मेरी शैलियों की नकल करें। इस तरह से वास्तविक मार्कअप एक छोटा सा क्लीनर है।

— garrettwinder
स्रोत

यह बहुत धीमा है

— हिदायत रहमान

8

आप :textप्रकार पाठ के साथ सभी इनपुट का चयन करने के लिए चयनकर्ता का उपयोग कर सकते हैं

वर्किंग फिडल

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

:textएक jQuery एक्सटेंशन है और CSS विनिर्देशन का हिस्सा नहीं है, प्रश्नों का उपयोग करते हुए: पाठ डोमिन डोम DOMSSlectorAll () विधि द्वारा प्रदान किए गए प्रदर्शन को बढ़ावा देने का लाभ नहीं उठा सकता है। आधुनिक ब्राउज़रों में बेहतर प्रदर्शन के लिए, [type="text"]इसके बजाय उपयोग करें । इसके लिए काम करेंगे IE6+।

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

सीएसएस

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

— आमिर शहजाद
स्रोत

2

मेरे पास तालिका पंक्ति फ़ील्ड में इनपुट प्रकार का टेक्स्ट फ़ील्ड था। मैं इसे कोड के साथ लक्षित कर रहा हूं

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

— अमित म्हस्के
स्रोत

0

जैसा कि @Amir ऊपर पोस्ट किया गया है, आजकल सबसे अच्छा तरीका है - क्रॉस-ब्राउज़र और IE6 को पीछे छोड़ना - उपयोग करना है

[type=text] {}

कोई भी उल्लेख किया कम सीएसएस विशिष्टता ( क्यों है कि महत्वपूर्ण ?) अब तक, [type=text] सुविधाओं 0,0,1,0 बजाय 0,0,1,1 के साथ input[type=text]।

प्रदर्शन-वार वहाँ किसी भी अधिक पर कोई नकारात्मक प्रभाव नहीं है।

v4.0.0 को सामान्यीकृत चयनकर्ता विशिष्टता के साथ जारी करें ।

— वोल्कर ई।
स्रोत

0

विशेषता चयनकर्ता के साथ हम CSS में इनपुट टाइप टेक्स्ट को लक्षित करते हैं

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

— संतोष खलसे
स्रोत

0

इनपुट [प्रकार = पाठ]

यह एक वेब-पेज में सभी इनपुट प्रकार के पाठ का चयन करेगा।

— नवनीत कुमार
स्रोत

-1

विशेषता चयनकर्ताओं का उपयोग अक्सर इनपुट के लिए किया जाता है। यह विशेषता चयनकर्ताओं की सूची है:

[शीर्षक] शीर्षक विशेषता वाले सभी तत्वों का चयन किया जाता है।

[शीर्षक = केला] सभी तत्व जिनके पास शीर्षक विशेषता का 'केला' मूल्य है।

[शीर्षक ~ = केला] सभी तत्व जिनमें शीर्षक विशेषता के मूल्य में 'केला' होता है।

[शीर्षक | = केला] शीर्षक विशेषता के सभी तत्व 'केला' से शुरू होते हैं।

[शीर्षक ^ = केला] शीर्षक विशेषता के मूल्य के सभी तत्व 'केला' से शुरू होते हैं।

[शीर्षक $ = केला] शीर्षक विशेषता के सभी तत्व 'केला' के साथ समाप्त होते हैं।

[शीर्षक * = केला] सभी तत्व जो शीर्षक विशेषता के मान को प्रतिस्थापित करते हैं, उनमें 'केला' है।

संदर्भ: https://kolosek.com/css-selectors/

— नीशा ज़ोरिक
स्रोत