Màu văn bản đầu vào bị tắt

93

HTML đơn giản bên dưới hiển thị khác nhau trong các trình duyệt dựa trên Firefox và WebKit (tôi đã kiểm tra trong Safari, Chrome và iPhone).

Trong Firefox, cả đường viền và văn bản đều có cùng màu ( #880000), nhưng trong Safari, văn bản sẽ nhạt hơn một chút (như thể nó có một số độ trong suốt được áp dụng).

Tôi có thể sửa lỗi này bằng cách nào đó không (xóa độ trong suốt này trong 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>

— Tình cờ
nguồn

Tôi cũng nhận thấy điều này, đối với tôi đây là một lỗi, vì khi bạn đặt background-color: white của đầu vào, nó sẽ hiển thị lại màu một cách chính xác. Ngoài ra độ mờ có rất ít tác dụng. Mặc dù -webkit-text-fill-color: # 880000 sẽ hoạt động

— Miguel

235

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

— Kemo
nguồn

51

Tôi muốn hộp nhập bị tắt của mình trông giống như một hộp bình thường. Đây là thứ duy nhất hoạt động trong Safari Mobile. -webkit-text-fill-color: rgba (0, 0, 0, 1); -webkit-opacity: 1; nền: trắng;

— Ryan

11

@Ryan nói đúng - độ mờ phải được đặt thành 1cho Mobile Safari.

— David Jones

7

opacity:1cũng cần thiết.

— Marcel Falliere

3

Opacity là không cần thiết trong hiện tại được xây dựng của Safari, tính đến mùa hè năm 2016.

— Andy Mercer

2

Đã lưu ngày của tôi! Tuy nhiên, nó cũng ảnh hưởng đến màu placeholdervăn bản của inputphần tử. Trong trường hợp bạn cũng cần một bản sửa lỗi, hãy xem liên kết này: css-tricks.com/almanac/selectors/p/placeholder

— Lentyai

43

Các trình duyệt webkit trên Điện thoại và Máy tính bảng (Safari và Chrome) và IE trên máy tính để bàn có một số thay đổi mặc định đối với các phần tử biểu mẫu bị tắt mà bạn sẽ cần ghi đè nếu muốn tạo kiểu cho các đầu vào bị vô hiệu hóa.

-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 */

— lijinma
nguồn

6

đó là một câu hỏi thú vị và tôi đã thử nhiều lần ghi đè để xem liệu tôi có thể làm được hay không, nhưng không có kết quả gì. Các trình duyệt hiện đại thực sự sử dụng các biểu định kiểu của riêng chúng để cho các phần tử biết cách hiển thị, vì vậy có thể nếu bạn có thể kiểm tra biểu định kiểu của Chrome, bạn có thể biết những kiểu họ đang ép buộc trên đó. Tôi sẽ rất quan tâm đến kết quả và nếu bạn không có kết quả, tôi sẽ dành một chút thời gian để tìm kiếm nó sau khi tôi có chút thời gian lãng phí.

FYI,

opacity: 1!important;

không ghi đè nó, vì vậy tôi không chắc đó là độ mờ.

— Steve Perks
nguồn

cảm ơn! Tôi không thể tìm thấy lời giải thích (không có gì giống như vậy trong biểu định kiểu tác nhân người dùng của Chrome - chỉ "background-color: rgb (235, 235, 228)" cho các đầu vào bị tắt) và tôi đang sử dụng một giải pháp khác, nhưng vẫn tò mò điều gì đang xảy ra vào ...

— Sự cố

Steve, cảm ơn bạn đã nỗ lực, nhưng tôi đề nghị trong tương lai bạn nên đăng bài này dưới dạng một bình luận hơn là một câu trả lời.

— avernet

6

Bạn có thể thay đổi màu sắc để #440000chỉ cho Safari, nhưng IMHO là giải pháp tốt nhất là không để vẻ bề ngoài thay đổi nút ở tất cả . Bằng cách này, trong mọi trình duyệt trên mọi nền tảng, nó sẽ giống như người dùng mong đợi.

— Kornel
nguồn

5

CẬP NHẬT 2019:

Kết hợp các ý tưởng từ trang này thành một giải pháp "đặt và quên".

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 */
}

— paulcol.
nguồn

4

Bạn có thể sử dụng thuộc tính readonly thay vì thuộc tính bị vô hiệu hóa, nhưng sau đó bạn sẽ cần thêm một lớp vì không có đầu vào lớp giả: readonly.

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

Lưu ý rằng đầu vào bị vô hiệu hóa và đầu vào chỉ đọc không giống nhau. Đầu vào chỉ đọc có thể có tiêu điểm và sẽ gửi các giá trị khi gửi. Nhìn vào w3.org

— Serxipc
nguồn

Cảm ơn bạn, đây cũng là ý tưởng đầu tiên của tôi, nhưng nó không hoạt động với tôi vì sự tập trung: trên iPhone, bàn phím bật lên khi người dùng chạm vào một phần tử chỉ đọc và điều này thật khó hiểu. Tôi đã tìm ra cách giải quyết của mình và câu hỏi khá 'lý thuyết' - tại sao lại có hành vi này?

— Sự cố

Một cách giải quyết thú vị: vấn đề lấy nét cũng đặt ra các vấn đề về khả năng sử dụng, đặc biệt là đối với những người sử dụng trình đọc màn hình. Trong hầu hết các trường hợp, bạn sẽ không muốn người dùng có thể gắn tab để đọc các trường chỉ đọc / bị vô hiệu hóa trong một biểu mẫu.

— avernet

4

cho @ryan

Tôi muốn hộp nhập bị tắt của mình trông giống như một hộp bình thường. Đây là thứ duy nhất hoạt động trong Safari Mobile.

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

— vanduc1102
nguồn

3

Nếu bạn muốn khắc phục sự cố cho tất cả các đầu vào bị vô hiệu hóa, bạn có thể xác định -webkit-text-fill-colorthành currentcolor, do đó, thuộc colortính của đầu vào sẽ được sử dụng.

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

Xem trò chơi đó trên Safari https://jsfiddle.net/u549yk87/3/

— Freez
nguồn

2

Câu hỏi này rất cũ nhưng tôi nghĩ rằng tôi sẽ đăng một giải pháp webkit cập nhật. Chỉ cần sử dụng CSS sau:

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

— conceptDawg
nguồn

3

và cho Firefox, sử dụng đầu vào: moz-placeholder

— stephan.com

1

ơ .. đây là thuộc tính trình giữ chỗ, tôi không nghĩ rằng điều đó ảnh hưởng đến các trường bị vô hiệu hóa. Câu trả lời của @ Kemo dưới đây ( -webkit-text-fill-color) không hoạt động

— philfreo

0

Bạn có thể sử dụng một nút thay vì một đầu vào không?

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

không thực sự ... trong ứng dụng thực của tôi, các hộp văn bản đó thường được kích hoạt và sử dụng để nhập liệu và chỉ trong một số điều kiện nhất định, chúng bị vô hiệu hóa với JavaScript, tôi có thể tìm ra cách giải quyết (như thay thế <input /> bằng <div> < / div> thay vì đặt 'vô hiệu hóa') - nhưng nó thực sự cảm thấy sai

— Sự cố