لون نص الإدخال معطل
https://stackoverflow.com/questions/262158
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
يتم عرض HTML البسيط أدناه بشكل مختلف في المتصفحات المستندة إلى Firefox وWebKit (لقد قمت بالتحقق من Safari وChrome وiPhone).
في Firefox، يكون لكل من الحدود والنص نفس اللون (#880000)، ولكن في Safari يصبح النص أفتح قليلاً (كما لو كان قد تم تطبيق بعض الشفافية عليه).
هل يمكنني إصلاح هذا بطريقة أو بأخرى (إزالة هذه الشفافية في Safari)؟
تحديث:
شكرا لإجاباتك.لم أعد بحاجة إلى هذا لعملي (بدلاً من تعطيل أنا أستبدل input العناصر ذات التصميم div عناصر)، ولكن ما زلت أشعر بالفضول لماذا يحدث هذا وإذا كان هناك أي طريقة للسيطرة على هذا السلوك ...
<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>
المحلول
-webkit-text-fill-color: #880000;
opacity: 1; /* required on iOS */
نصائح أخرى
تحتوي متصفحات webkit للهواتف والأجهزة اللوحية (Safari وChrome) وسطح المكتب 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 */
إنه سؤال مثير للاهتمام ولقد حاولت العديد من التجاوزات لمعرفة ما إذا كان بإمكاني تنفيذه، ولكن لا شيء يعمل.تستخدم المتصفحات الحديثة في الواقع أوراق الأنماط الخاصة بها لإخبار العناصر بكيفية عرضها، لذلك ربما إذا تمكنت من التعرف على ورقة أنماط Chrome، فيمكنك معرفة الأنماط التي يفرضونها عليها.سأكون مهتمًا جدًا بالنتيجة، وإذا لم يكن لديك واحدة، فسأقضي بعض الوقت بنفسي في البحث عنها لاحقًا عندما يكون لدي بعض الوقت لأضيعه.
لعِلمِكَ،
opacity: 1!important;
لا يتجاوزها، لذا لست متأكدًا من أنها عتامة.
يمكنك تغيير اللون إلى #440000 فقط لمتصفح Safari، ولكن الحل الأفضل هو IMHO لا تغيير مظهر الزر على الاطلاق.بهذه الطريقة، في كل متصفح على كل منصة، سيبدو تمامًا كما يتوقعه المستخدمون.
يمكنك استخدام السمة للقراءة فقط بدلاً من السمة المعطلة، ولكن بعد ذلك ستحتاج إلى إضافة فئة لأنه لا يوجد إدخال فئة زائفة: للقراءة فقط.
<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
ل @ريان
أردت أن يبدو صندوق الإدخال المعطل الخاص بي وكأنه صندوق عادي.هذا هو الشيء الوحيد الذي قد يعمل في Safari Mobile.
-webkit-text-fill-color: rgba(0, 0, 0, 1);
-webkit-opacity: 1;
background: white;
هذا السؤال قديم جدًا ولكني اعتقدت أنني سأقوم بنشر حل webkit المحدث.فقط استخدم CSS التالي:
input::-webkit-input-placeholder {
color: #880000;
}
إذا كنت تريد حل المشكلة لجميع المدخلات المعطلة، يمكنك تحديد -webkit-text-fill-color ل currentcolor, ، لذلك color سيتم استخدام خاصية الإدخال.
input[disabled] {
-webkit-text-fill-color: currentcolor;
}
شاهد هذا الكمان في Safarihttps://jsfiddle.net/u549yk87/3/
تم التحديث في عام 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 */
}
هل يمكنك استخدام زر بدلاً من الإدخال؟
<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>
