Warna teks masukan dinonaktifkan

Question 1

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>

Question 2

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

Question 3

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

Question 4

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.

Question 5

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.

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

Question 7

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

Question 8

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;

Question 9

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/

Question 10

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

Question 11

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>

Answer 1

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>

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

11

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

David Jones

Answer 6

7

opacity:1juga perlu.

Marcel Falliere

Answer 7

3

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

Andy Mercer

Answer 8

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

Answer 9

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

Answer 10

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

Answer 11

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

Answer 12

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

avernet

Answer 13

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.

Answer 14

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

Answer 15

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

Answer 16

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

Answer 17

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

Answer 18

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;

Answer 19

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/

Answer 20

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

Answer 21

3

dan untuk Firefox, gunakan masukan: -moz-placeholder

stephan.com

Answer 22

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

Answer 23

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>

sumber

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

Answer 24

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

Warna teks masukan dinonaktifkan

Jawaban: