ปิดใช้งานสีข้อความที่ป้อน

Question 1

HTML แบบง่ายด้านล่างแสดงแตกต่างกันในเบราว์เซอร์ Firefox และ WebKit (ฉันตรวจสอบใน Safari, Chrome และ iPhone)

ใน Firefox ทั้งเส้นขอบและข้อความจะมีสีเดียวกัน ( #880000) แต่ใน Safari ข้อความจะจางลงเล็กน้อย (ราวกับว่ามีความโปร่งใสอยู่บ้าง)

ฉันจะแก้ไขได้อย่างไร (ลบความโปร่งใสนี้ใน Safari)

<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 สำหรับโทรศัพท์และแท็บเล็ต (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 */

Question 4

เป็นคำถามที่น่าสนใจและฉันได้ลองใช้การลบล้างมากมายเพื่อดูว่าฉันจะไปได้ไหม แต่ไม่มีอะไรได้ผล เบราว์เซอร์สมัยใหม่ใช้สไตล์ชีตของตัวเองเพื่อบอกองค์ประกอบต่างๆว่าจะแสดงอย่างไรดังนั้นบางทีถ้าคุณสามารถสูดดมสไตล์ชีทของ Chrome ได้คุณจะเห็นว่าพวกเขาบังคับใช้สไตล์ใด ฉันจะสนใจในผลลัพธ์มากและถ้าคุณไม่มีฉันจะใช้เวลาเล็กน้อยเพื่อหามันในภายหลังเมื่อฉันมีเวลาที่จะเสียไป

FYI,

opacity: 1!important;

ไม่ได้ลบล้างดังนั้นฉันไม่แน่ใจว่ามันทึบ

Question 5

คุณสามารถเปลี่ยนสีเป็น #440000เพียงสำหรับ Safari แต่ 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

สำหรับ @ryan

ฉันต้องการให้ช่องป้อนข้อมูลที่ปิดใช้งานของฉันดูเหมือนกล่องปกติ นี่เป็นสิ่งเดียวที่ใช้ได้ใน Safari Mobile

-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;
}

ดูซอใน Safari https://jsfiddle.net/u549yk87/3/

Question 10

คำถามนี้เก่ามาก แต่ฉันคิดว่าจะโพสต์โซลูชัน webkit ที่อัปเดตแล้ว เพียงใช้ CSS ต่อไปนี้:

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>