कैसे सीएसएस के साथ आसानी से विशेषता शैली?

Question

मैं वर्तमान में खेतों को अक्षम करने के लिए readonly = "readonly" का उपयोग कर रहा हूं। अब मैं CSS का उपयोग करके विशेषता को स्टाइल करने की कोशिश कर रहा हूं। मैंने प्रयोग करने की कोशिश की है

input[readonly] {
/*styling info here*/
}

लेकिन यह किसी कारण से काम नहीं कर रहा है। मैंने भी कोशिश की है

input[readonly='readonly'] {
/*styling info here*/
}

वह भी काम नहीं करता है।

मैं CSS के साथ आसानी से विशेषता को कैसे स्टाइल कर सकता हूं?

Comments

input[readonly]कार्य करना चाहिए। सुनिश्चित करें कि यह आपके स्टाइलशीट में कहीं और, विशिष्ट विशिष्ट चयनकर्ताओं द्वारा ओवरराइड नहीं किया जा रहा है।

— BoltClock

यदि आप अक्षम करना चाहते हैं, तो विकलांग विशेषता का उपयोग करें और आसानी से नहीं

— स्वेन बीडर

@SvenBieder Readonly और विकलांगों का व्यवहार अलग-अलग होता है। अक्षम फ़ील्ड पर सर्वर को भेजे गए फ़ील्ड सबमिट करें जबकि अक्षम फ़ील्ड नहीं हैं।

— नरेन

input[readonly='readonly']केवल तभी काम करेगा जब आप HTML का उपयोग करते हैं <input readonly="readonly">, उदाहरण के लिए नहीं <input readonly>। input[readonly]दोनों से मेल खाना चाहिए।

— मथियास बीनेंस ने

!importantओवरराइड करने के लिए काम करना चाहिए, जब तक कि आपके पास !importantसेटिंग क्लास भी न हो ?

— मैट के

Answer 1

input[readonly]
{
    background-color:blue;
}

https://curtistimson.co.uk/post/css/style-readonly-attribute-css/

Comments

आपको input[readonly]इसके बजाय उपयोग करना चाहिए क्योंकि readonlyएक बूलियन विशेषता है जिसे एक विशिष्ट मूल्य के लिए डिज़ाइन नहीं किया गया है।

— BoltClock

@ बोल्टकॉक हाँ। कृपया नीचे दिए गए उत्तर में संकल्प देखें।

— पाल आर

मैं इसे फिर से लिखने योग्य कैसे बना सकता हूं? सिर्फ क्लास स्टाइल हटा रहे हो?

— रेनो सैंटोस

@RenaroSantos एक HTML परिवर्तन। readonly="readonly"अपने inputतत्व से हटाओ ।

— कर्ट

w / IE7 आप अभी भी चयनकर्ता का उपयोग कर सकते हैं jQuery के साथ

— लाहिउ

Answer 2

ध्यान दें कि textarea[readonly="readonly"]यदि आप readonly="readonly"HTML में सेट करते हैं , लेकिन यह काम नहीं करता है यदि आप readOnly-attribute trueया "readonly"जावास्क्रिप्ट के माध्यम से सेट करते हैं ।

यदि आप readOnlyजावास्क्रिप्ट के साथ सेट करते हैं तो सीएसएस चयनकर्ता को काम करने के लिए आपको चयनकर्ता का उपयोग करना होगा textarea[readonly]।

फ़ायरफ़ॉक्स 14 और क्रोम 20 में समान व्यवहार।

सुरक्षित पक्ष पर होने के लिए, मैं दोनों चयनकर्ताओं का उपयोग करता हूं।

textarea[readonly="readonly"], textarea[readonly] {
...
}

Comments

आप के textarea[readonly]बजाय बस का उपयोग कर सकते हैं - हर textarea[readonly="readonly"]मैच की गारंटी है कि

— BoltClock

Answer 3

सुरक्षित होने के लिए आप दोनों का उपयोग कर सकते हैं ...

input[readonly], input[readonly="readonly"] {
    /*styling info here*/
}

पठनीय विशेषता एक "बूलियन विशेषता" है, जो या तो रिक्त या "पठनीय" (केवल मान्य मान) हो सकती है। http://www.whatwg.org/specs/web-apps/current-work/#boolean-attribute

यदि आप jQuery के .prop('readonly', true)फ़ंक्शन जैसे कुछ का उपयोग कर रहे हैं , तो आपको आवश्यकता समाप्त हो जाएगी [readonly], जबकि यदि आप उपयोग कर रहे हैं .attr("readonly", "readonly")तो आपको आवश्यकता होगी [readonly="readonly"]।

---

सुधार: आपको केवल उपयोग करने की आवश्यकता है input[readonly]। सहित input[readonly="readonly"]बेमानी है। Https://stackoverflow.com/a/19645203/1766230 देखें

Answer 4

यहां उत्तरों का भार है, लेकिन मैंने जो उपयोग किया है वह नहीं देखा है:

input[type="text"]:read-only { color: blue; }

छद्म चयनकर्ता में डैश पर ध्यान दें। यदि इनपुट है तो readonly="false"वह पकड़ लेगा क्योंकि यह चयनकर्ता मूल्य की परवाह किए बिना आसानी से उपस्थिति दर्ज करता है। तकनीकी रूप falseसे चश्मे के अनुसार अमान्य है, लेकिन इंटरनेट एक आदर्श दुनिया नहीं है। यदि आपको उस मामले को कवर करने की आवश्यकता है, तो आप यह कर सकते हैं:

input[type="text"]:read-only:not([read-only="false"]) { color: blue; }

textarea उसी तरह काम करता है:

textarea:read-only:not([read-only="false"]) { color: blue; }

ध्यान रखें एचटीएमएल अब न केवल समर्थन करता है type="text", लेकिन इस तरह के एक अन्य शाब्दिक प्रकार के एक धसान number, tel, email, date, time, url, आदि प्रत्येक की आवश्यकता होगी चयनकर्ता के लिए जोड़ा जा करने के लिए।

Comments

न तो I LOL हाँ, आप सही हैं! अभी के लिए। :read-onlyऔर अन्य psuedo चयनकर्ताओं को W3C मानक में जोड़ा गया है और IE 10 पूर्वावलोकन के साथ इसका उपयोग 10547 और उच्चतर बनाया जा सकता है।

— IANNNN

Answer 5

ऐसा करने के कुछ तरीके हैं।

पहला सबसे व्यापक रूप से उपयोग किया जाता है। यह सभी प्रमुख ब्राउज़रों पर काम करता है।

input[readonly] {
 background-color: #dddddd;
}

जबकि ऊपर एक readonlyसंलग्न के साथ सभी इनपुट का चयन करेगा , यह नीचे एक ही चयन करेगा जो आप चाहते हैं। demoजो भी इनपुट प्रकार आप चाहते हैं, उससे प्रतिस्थापित करना सुनिश्चित करें ।

input[type="demo"]:read-only {
 background-color: #dddddd;
}

यह पहले के लिए एक वैकल्पिक है, लेकिन इसका उपयोग पूरी तरह से नहीं किया गया है:

input:read-only {
 background-color: #dddddd;
}

:read-onlyचयनकर्ता क्रोम, ओपेरा, और सफारी में समर्थित है। फ़ायरफ़ॉक्स उपयोग करता है :-moz-read-only। IE :read-onlyचयनकर्ता का समर्थन नहीं करता है ।

आप भी उपयोग कर सकते हैं input[readonly="readonly"], लेकिन यह input[readonly]मेरे अनुभव से बहुत अधिक है।

Answer 6

input[readonly], input:read-only {
    /* styling info here */
}

जोर से एक इनपुट इनपुट क्षेत्र के लिए सभी मामलों को कवर ...

Comments

इनपुट: रीड ओनली "अस्थिरता छद्म वर्ग विकलांग के आधार पर प्रपत्र आसान स्टाइल बनाने में लक्ष्य, केवल पढ़ने के लिए और contenteditable एचटीएमएल विशेषता" के रूप में यहाँ उल्लेख किया, css-tricks.com/almanac/selectors/r/read-write-read , विभिन्न कार्यान्वयन काफी विजयी हैं।

— मृग

यह अजीब है, लेकिन केवल इनपुट [आसानी से] मेरे लिए FF 58 में काम किया

— Pavel_K

Answer 7

केवल के पहले अक्षर को बड़ा करें

input[readOnly] {
      background: red !important;
    }

<input type="text" name="country" value="China" readonly="readonly" />

Answer 8

यदि आप आईडी द्वारा इनपुट का चयन करते हैं और फिर input[readonly="readonly"]सीएसएस में टैग जोड़ते हैं , तो कुछ इस तरह है:

 #inputID input[readonly="readonly"] {
     background-color: #000000;
 }

यह काम नहीं करेगा। आपको पैरेंट क्लास सेलेक्ट करना होगा या फिर इनपुट को आईडी करना होगा। कुछ इस तरह:

 .parentClass, #parentID input[readonly="readonly"] {
     background-color: #000000;
 }

काम पर नए टिकट की प्रतीक्षा में मेरे 2 सेंट: डी

Comments

"यदि आप आईडी द्वारा इनपुट का चयन करते हैं" - जो ओपी नहीं है, तो यह कैसे प्रासंगिक है? यहां तक ​​कि अगर यह मामला था, तो आप गलत हैं, आपको बस वंशज कॉम्बिनेटर को हटाने की आवश्यकता है।

— क्वेंटिन

AH ठीक है आपका मतलब है कि मुझे कुछ इनपुट टाइप करना है [Readonly = "readonly"] # inputID? / मुझे मूर्ख .. आप सही हैं

— सॉफ्टवेयरप्ले

Answer 9

सभी ब्राउज़रों में काम करने के लिए निम्नलिखित का उपयोग करें:

 var readOnlyAttr = $('.textBoxClass').attr('readonly');
    if (typeof readOnlyAttr !== 'undefined' && readOnlyAttr !== false) {
        $('.textBoxClass').addClass('locked');
    }

Comments

इसलिए, आशा है कि आपके लक्षित दर्शक उस 2% में नहीं हैं।

— बेको

वर्ग 'लॉक' में क्या शामिल है ??

— Adit

$ ('। textBoxClass')। addClass ('लॉक') में 'लॉक' शामिल होगा

— पाल आर