Warna teks masukan dinonaktifkan

95

HTML sederhana di bawah ini ditampilkan secara berbeda di browser berbasis Firefox dan WebKit (saya memeriksa di Safari, Chrome dan iPhone).

Di Firefox, batas dan teks memiliki warna yang sama ( #880000), tetapi di Safari teks menjadi sedikit lebih terang (seolah-olah ada transparansi yang diterapkan padanya).

Dapatkah saya memperbaiki ini (menghapus transparansi ini di 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>

— Kebetulan
sumber

Saya juga memperhatikan ini, bagi saya ini adalah bug, karena ketika Anda meletakkan background-color: putih pada input itu akan menunjukkan warna lagi dengan benar. Juga opacity memiliki pengaruh yang kecil. Meskipun -webkit-text-fill-color: # 880000 akan bekerja

— Miguel

239

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

— Kemo
sumber

51

Saya ingin kotak masukan saya yang dinonaktifkan terlihat seperti yang biasa. Ini adalah satu-satunya hal yang akan berfungsi di Safari Mobile. -webkit-teks-isi-warna: rgba (0, 0, 0, 1); -webkit-opacity: 1; latar belakang: putih;

— Ryan

11

@ Ryan benar tentang - opacity harus diatur ke 1Mobile Safari.

— David Jones

7

opacity:1juga perlu.

— Marcel Falliere

3

Opasitas tidak diperlukan dalam versi Safari saat ini, mulai Musim Panas 2016.

— Andy Mercer

2

Menyelamatkan hariku! Namun itu juga mempengaruhi pewarnaan placeholderwarna teks dari inputelemen tersebut. Jika Anda memerlukan perbaikan untuk itu juga, lihat tautan ini: css-tricks.com/almanac/selectors/p/placeholder

— Lentyai

43

Browser webkit Ponsel dan Tablet (Safari dan Chrome) serta desktop IE memiliki sejumlah perubahan default ke elemen formulir yang dinonaktifkan yang harus Anda ganti jika Anda ingin memberi gaya pada input yang dinonaktifkan.

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

6

itu pertanyaan yang menarik dan saya sudah mencoba banyak penggantian untuk melihat apakah saya bisa menjalankannya, tetapi tidak ada yang berhasil. Peramban modern sebenarnya menggunakan lembar gayanya sendiri untuk memberi tahu elemen cara menampilkannya, jadi mungkin jika Anda dapat mengendus lembar gaya Chrome, Anda dapat melihat gaya apa yang mereka paksakan. Saya akan sangat tertarik dengan hasilnya dan jika Anda tidak memilikinya, saya akan menghabiskan sedikit waktu untuk mencarinya nanti ketika saya punya waktu untuk disia-siakan.

FYI,

opacity: 1!important;

tidak menimpanya, jadi saya tidak yakin opasitasnya.

— Steve Perks
sumber

Terima kasih! Saya tidak dapat menemukan penjelasan (tidak seperti itu di lembar gaya agen pengguna Chrome - hanya "background-color: rgb (235, 235, 228)" untuk input yang dinonaktifkan) dan saya menggunakan solusi, tetapi masih penasaran apa yang terjadi pada ...

— Kebetulan

Steve, terima kasih atas usahanya, tetapi saya sarankan di masa mendatang Anda memposting ini sebagai komentar daripada sebagai jawaban.

— avernet

6

Anda dapat mengubah warna menjadi #440000hanya untuk Safari, tetapi IMHO solusi terbaik adalah tidak mengubah tampilan tombol sama sekali . Dengan cara ini, di setiap browser di setiap platform, itu akan terlihat seperti yang diharapkan pengguna.

— Kornel
sumber

6

DIPERBARUI 2019:

Menggabungkan ide-ide dari halaman ini menjadi solusi "atur dan lupakan".

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

4

Anda dapat menggunakan atribut readonly alih-alih atribut disabled, tetapi kemudian Anda perlu menambahkan kelas karena tidak ada pseudo-class input: 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>

Berhati-hatilah karena input yang dinonaktifkan dan input hanya-baca tidak sama. Masukan hanya-baca dapat memiliki fokus, dan akan mengirimkan nilai saat dikirim. Lihat w3.org

— Serxipc
sumber

terima kasih, ya, ini juga ide pertama saya, tetapi tidak berhasil untuk saya karena fokus: di iPhone, keyboard akan muncul saat pengguna mengetuk elemen hanya-baca, dan ini membingungkan saya telah menemukan solusi saya, dan saya pertanyaan agak 'teoritis' - mengapa perilaku ini?

— Kebetulan

Solusi yang menarik: masalah fokus juga menimbulkan masalah kegunaan, khususnya bagi orang yang menggunakan pembaca layar. Dalam kebanyakan kasus, Anda tidak ingin pengguna dapat membuka tab ke bidang hanya baca / nonaktif dalam formulir.

— avernet

4

untuk @ryan

Saya ingin kotak masukan saya yang dinonaktifkan terlihat seperti yang biasa. Ini adalah satu-satunya hal yang akan berfungsi di Safari Mobile.

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

— vanduc1102
sumber

3

Jika Anda ingin memperbaiki masalah untuk semua input yang dinonaktifkan, Anda dapat menentukan -webkit-text-fill-colorke currentcolor, sehingga colorproperti input akan digunakan.

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

Lihat biola itu di Safari https://jsfiddle.net/u549yk87/3/

— Freez
sumber

2

Pertanyaan ini sudah sangat lama tetapi saya pikir saya akan memposting solusi webkit yang diperbarui. Cukup gunakan CSS berikut:

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

— conceptDawg
sumber

3

dan untuk Firefox, gunakan masukan: -moz-placeholder

— stephan.com

1

eh .. ini untuk atribut placeholder, saya rasa itu tidak berpengaruh pada bidang yang dinonaktifkan. @ Jawaban Kemo di bawah ( -webkit-text-fill-color) memang berhasil

— philfreo

0

Bisakah Anda menggunakan tombol sebagai ganti input?

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

tidak terlalu ... dalam aplikasi saya yang sebenarnya, kotak teks tersebut biasanya diaktifkan dan digunakan untuk input, dan hanya dalam kondisi tertentu kotak teks tersebut dinonaktifkan dengan JavaScript, saya dapat menemukan solusinya (seperti, ganti <input /> dengan <div> bergaya < / div> alih-alih menyetel 'nonaktif') - tetapi ini benar-benar terasa salah

— Kebetulan