अक्षम इनपुट पाठ रंग

Question 1

नीचे दिया गया साधारण HTML अलग-अलग फ़ायरफ़ॉक्स और वेबिट-आधारित ब्राउज़रों में प्रदर्शित होता है (मैंने सफारी, क्रोम और आईफ़ोन में जाँच की)।

फ़ायरफ़ॉक्स में बॉर्डर और टेक्स्ट दोनों का रंग समान है ( #880000), लेकिन सफारी में टेक्स्ट थोड़ा हल्का हो जाता है (जैसे कि उस पर कुछ पारदर्शिता लागू की गई थी)।

क्या मैं किसी तरह इसे ठीक कर सकता हूं (सफारी में इस पारदर्शिता को हटा दें)?

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    input:disabled{
        border:solid 1px #880000;
        background-color:#ffffff;
        color:#880000;
    }
    </style>
</head>
<body>
    <form action="">
        <input type="text" value="disabled input box" disabled="disabled"/>
    </form>
</body>
</html>

Question 2

-webkit-text-fill-color: #880000;
opacity: 1; /* required on iOS */

Question 3

फ़ोन और टेबलेट वेबकिट ब्राउज़र (सफारी और क्रोम) और डेस्कटॉप IE में कई निष्क्रिय रूप तत्वों के लिए डिफ़ॉल्ट परिवर्तन होते हैं जिन्हें आप अक्षम इनपुट की शैली में करना चाहते हैं, तो आपको ओवरराइड करना होगा।

-webkit-text-fill-color:#880000; /* Override iOS / Android font color change */
-webkit-opacity:1; /* Override iOS opacity change affecting text & background color */
color:#880000; /* Override IE font color change */

Question 4

यह एक दिलचस्प सवाल है और मैंने यह देखने के लिए बहुत प्रयास किए हैं कि क्या मैं इसे प्राप्त कर सकता हूं, लेकिन कुछ भी काम नहीं कर रहा है। आधुनिक ब्राउज़र वास्तव में तत्वों को प्रदर्शित करने के तरीके बताने के लिए अपनी स्वयं की स्टाइल शीट का उपयोग करते हैं, इसलिए हो सकता है कि यदि आप क्रोम की स्टाइलशीट को सूँघ सकें तो आप देख सकते हैं कि वे किस शैली के लिए मजबूर कर रहे हैं। मुझे परिणाम में बहुत दिलचस्पी होगी और अगर आपके पास एक नहीं है तो मैं थोड़ा समय अपने आप को तलाश करूँगा बाद में जब मुझे कुछ समय बर्बाद करना होगा।

FYI करें,

opacity: 1!important;

यह ओवरराइड नहीं करता है, इसलिए मुझे यकीन नहीं है कि यह अस्पष्टता है।

Question 5

आप करने के लिए रंग बदल सकता है #440000सफारी के लिए बस, लेकिन IMHO सबसे अच्छा समाधान होगा करने के लिए नहीं बटन के परिवर्तन दिखता है सब पर । इस तरह, हर प्लेटफ़ॉर्म पर हर ब्राउज़र में, यह वैसा ही दिखेगा जैसा कि उपयोगकर्ता इसे करने की अपेक्षा करते हैं।

Question 6

अद्यतन 2019:

इस पृष्ठ से विचारों को "सेट और भूल" समाधान में मिलाएं।

input:disabled, textarea:disabled, input:disabled::placeholder, textarea:disabled::placeholder {
  -webkit-text-fill-color: currentcolor; /* 1. sets text fill to current `color` for safari */
  opacity: 1; /* 2. correct opacity on iOS */
}

Question 7

आप अक्षम विशेषता के बजाय आसानी से उपयोग कर सकते हैं, लेकिन तब आपको एक वर्ग जोड़ने की आवश्यकता होगी क्योंकि कोई छद्म वर्ग इनपुट नहीं है: आसानी से।

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
button.readonly{
    border:solid 1px #880000;
    background-color:#ffffff;
    color:#880000;
}
</style>
</head>
<body>
<form action="">
    <button type="button" readonly="readonly" class="readonly">disabled input box</button>
</form>
</body>
</html>

सावधान रहें कि एक अक्षम इनपुट और आसानी से इनपुट समान नहीं हैं। एक आसानी से इनपुट में फ़ोकस हो सकता है, और सबमिट पर मान भेजे जाएंगे। को देखो w3.org

Question 8

@ आर्यन के लिए

मैं चाहता था कि मेरा विकलांग इनपुट बॉक्स एक सामान्य की तरह दिखे। यह केवल एक चीज है जो सफारी मोबाइल में काम करेगी।

-webkit-text-fill-color: rgba(0, 0, 0, 1);
-webkit-opacity: 1;
background: white;

Question 9

आप सभी विकलांग आदानों के लिए समस्या को ठीक करने के लिए चाहते हैं, तो आप को परिभाषित कर सकते -webkit-text-fill-colorकरने के लिए currentcolorहै, तो colorइनपुट की संपत्ति का उपयोग किया जाएगा।

input[disabled] {
   -webkit-text-fill-color: currentcolor;
}

सफारी पर उस बेला को देखें https://jsfiddle.net/u549yk87/3/ देखें

Question 10

यह सवाल बहुत पुराना है लेकिन मुझे लगा कि मैं एक अपडेटेड वेबकिट समाधान पोस्ट करूंगा। बस निम्नलिखित सीएसएस का उपयोग करें:

input::-webkit-input-placeholder {
  color: #880000;
}

Question 11

क्या आप इनपुट के बजाय बटन का उपयोग कर सकते हैं?

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    button:disabled{
        border:solid 1px #880000;
        background-color:#ffffff;
        color:#880000;
    }
    </style>
</head>
<body>
    <form action="">
        <button type="button" disabled="disabled">disabled input box</button>
    </form>
</body>
</html>