অক্ষম ইনপুট পাঠ্যের রঙ

Question 1

নীচের সরল এইচটিএমএল ফায়ারফক্স এবং ওয়েবকিট-ভিত্তিক ব্রাউজারগুলিতে আলাদাভাবে প্রদর্শন করে (আমি সাফারি, ক্রোম এবং আইফোনে চেক করেছি)।

ফায়ারফক্সে সীমানা এবং পাঠ্য উভয়ই একই রঙের ( #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

ফোন এবং ট্যাবলেট ওয়েবকিট ব্রাউজারগুলি (সাফারি এবং ক্রোম) এবং ডেস্কটপ আইয়ের অক্ষম ফর্ম উপাদানগুলিতে অনেকগুলি ডিফল্ট পরিবর্তন রয়েছে যা আপনি যদি স্টাইল অক্ষম ইনপুটগুলি দেখতে চান তবে আপনাকে ওভাররাইড করতে হবে।

-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

এটি একটি আকর্ষণীয় প্রশ্ন এবং আমি এটি চালিয়ে যেতে পারি কিনা তা দেখার জন্য প্রচুর ওভাররাইড চেষ্টা করেছি তবে কিছুই কাজ করছে না। আধুনিক ব্রাউজারগুলি কীভাবে প্রদর্শন করতে হয় তা উপাদানগুলিকে জানাতে তাদের নিজস্ব স্টাইল শিটগুলি ব্যবহার করে, তাই আপনি যদি ক্রোমের স্টাইলশীটটি স্নিগ্ধ করতে পারেন তবে তারা দেখতে পাচ্ছেন যে তারা এতে কোন স্টাইল জোর করছে। আমি ফলাফলটি সম্পর্কে খুব আগ্রহী হব এবং আপনার যদি এটি না থাকে আমি পরে কিছুটা সময় নষ্ট করার পরে আমি এটির জন্য নিজেকে একটু সময় ব্যয় করব।

এফওয়াইআই,

opacity: 1!important;

এটিকে ওভাররাইড করে না, সুতরাং আমি এটির অস্বচ্ছতা সম্পর্কে নিশ্চিত নই।

Question 5

আপনি রং পরিবর্তন হতে পারে #440000সাফারি মাত্র, কিন্তু এই প্রোগ্রামটিতে সবচেয়ে ভালো সমাধান হবে না বোতাম পরিবর্তনের সৌন্দর্য সব সময়ে । এইভাবে, প্রতিটি প্ল্যাটফর্মের প্রতিটি ব্রাউজারে, এটি ব্যবহারকারীদের প্রত্যাশার মতো দেখাবে।

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

@ryan এর জন্য

আমি চেয়েছিলাম আমার অক্ষম ইনপুট বাক্সটি একটি সাধারণের মতো দেখায়। সাফারি মোবাইলে এটিই কাজ করবে।

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

Question 9

আপনি যদি সমস্ত অক্ষম ইনপুটগুলির জন্য সমস্যাটি সমাধান করতে চান তবে আপনি সংজ্ঞা -webkit-text-fill-colorদিতে পারেন currentcolor, সুতরাং ইনপুটটির colorসম্পত্তি ব্যবহৃত হবে used

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>