Wyłączono kolor tekstu wejściowego

Question 1

Poniższy prosty kod HTML wyświetla się inaczej w przeglądarkach Firefox i WebKit (sprawdziłem w Safari, Chrome i iPhone).

W przeglądarce Firefox zarówno obramowanie, jak i tekst mają ten sam kolor ( #880000), ale w Safari tekst staje się nieco jaśniejszy (tak, jakby zastosowano do niego trochę przezroczystości).

Czy mogę to jakoś naprawić (usunąć tę przezroczystość w 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

Przeglądarki webkit na telefonach i tabletach (Safari i Chrome) oraz IE na komputerach stacjonarnych mają szereg domyślnych zmian w wyłączonych elementach formularzy, które należy nadpisać, jeśli chcesz nadać styl wyłączonym wejściom.

-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

to interesujące pytanie i próbowałem wielu zastąpień, aby sprawdzić, czy uda mi się je uruchomić, ale nic nie działa. Nowoczesne przeglądarki używają własnych arkuszy stylów, aby powiedzieć elementom, jak mają się wyświetlać, więc może jeśli uda ci się wywęszyć arkusz stylów Chrome, zobaczysz, jakie style na nim wymuszają. Będę bardzo zainteresowany wynikiem, a jeśli go nie masz, spędzę trochę czasu na jego poszukiwaniu później, gdy będę miał trochę czasu do stracenia.

FYI,

opacity: 1!important;

nie zastępuje go, więc nie jestem pewien, czy to krycie.

Question 5

Można zmienić kolor #440000tylko dla Safari, ale imho najlepszym rozwiązaniem byłoby nie do zmiany wyglądu przycisku w ogóle . Dzięki temu w każdej przeglądarce na każdej platformie będzie wyglądać tak, jak oczekują tego użytkownicy.

Question 6

AKTUALIZACJA 2019:

Łączenie pomysłów z tej strony w rozwiązanie typu „ustaw i zapomnij”.

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

Możesz użyć atrybutu tylko do odczytu zamiast atrybutu wyłączonego, ale wtedy będziesz musiał dodać klasę, ponieważ nie ma wejścia pseudoklasy: tylko do odczytu.

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

Pamiętaj, że wyłączone wejście i wejście tylko do odczytu to nie to samo. Dane wejściowe tylko do odczytu mogą mieć fokus i będą wysyłać wartości po przesłaniu. Spójrz na w3.org

Question 8

dla @ryan

Chciałem, aby moje wyłączone pole wprowadzania wyglądało jak normalne. To jedyna rzecz, która działałaby w Safari Mobile.

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

Question 9

Jeśli chcesz naprawić problem dla wszystkich wyłączonych wejść, możesz zdefiniować -webkit-text-fill-colorto currentcolor, aby colorwłaściwość wejścia była używana.

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

Zobacz to skrzypce w Safari https://jsfiddle.net/u549yk87/3/

Question 10

To pytanie jest bardzo stare, ale pomyślałem, że opublikuję zaktualizowane rozwiązanie webkit. Po prostu użyj następującego CSS:

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

Question 11

Czy zamiast wejścia można użyć przycisku?

<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

Poniższy prosty kod HTML wyświetla się inaczej w przeglądarkach Firefox i WebKit (sprawdziłem w Safari, Chrome i iPhone).

W przeglądarce Firefox zarówno obramowanie, jak i tekst mają ten sam kolor ( #880000), ale w Safari tekst staje się nieco jaśniejszy (tak, jakby zastosowano do niego trochę przezroczystości).

Czy mogę to jakoś naprawić (usunąć tę przezroczystość w 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

Zauważyłem też to, dla mnie jest to błąd, ponieważ po umieszczeniu koloru tła: biały na wejściu ponownie pokaże kolor poprawnie. Również krycie ma niewielki wpływ. Chociaż -webkit-text-fill-color: # 880000 zadziała

Miguel

Answer 3

239

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

Kemo
źródło

51

Chciałem, aby moje wyłączone pole wprowadzania wyglądało jak normalne. To jedyna rzecz, która działałaby w Safari Mobile. -webkit-text-fill-color: rgba (0, 0, 0, 1); -webkit-krycie: 1; tło: białe;

Ryan

11

@Ryan ma rację - krycie musi być ustawione 1na Mobile Safari.

David Jones

7

opacity:1jest również konieczne.

Marcel Falliere

3

Krycie nie jest potrzebne w obecnych wersjach Safari od lata 2016.

Andy Mercer

2

Uratowałem mój dzień! Jednak wpływa to również na kolorystykę placeholdertekstu, kolor inputelementu. Jeśli będziesz potrzebować poprawki, spójrz na ten link: css-tricks.com/almanac/selectors/p/placeholder

Lentyai

Answer 4

51

Chciałem, aby moje wyłączone pole wprowadzania wyglądało jak normalne. To jedyna rzecz, która działałaby w Safari Mobile. -webkit-text-fill-color: rgba (0, 0, 0, 1); -webkit-krycie: 1; tło: białe;

Ryan

Answer 5

11

@Ryan ma rację - krycie musi być ustawione 1na Mobile Safari.

David Jones

Answer 6

7

opacity:1jest również konieczne.

Marcel Falliere

Answer 7

3

Krycie nie jest potrzebne w obecnych wersjach Safari od lata 2016.

Andy Mercer

Answer 8

2

Uratowałem mój dzień! Jednak wpływa to również na kolorystykę placeholdertekstu, kolor inputelementu. Jeśli będziesz potrzebować poprawki, spójrz na ten link: css-tricks.com/almanac/selectors/p/placeholder

Lentyai

Answer 9

Przeglądarki webkit na telefonach i tabletach (Safari i Chrome) oraz IE na komputerach stacjonarnych mają szereg domyślnych zmian w wyłączonych elementach formularzy, które należy nadpisać, jeśli chcesz nadać styl wyłączonym wejściom.

-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

to interesujące pytanie i próbowałem wielu zastąpień, aby sprawdzić, czy uda mi się je uruchomić, ale nic nie działa. Nowoczesne przeglądarki używają własnych arkuszy stylów, aby powiedzieć elementom, jak mają się wyświetlać, więc może jeśli uda ci się wywęszyć arkusz stylów Chrome, zobaczysz, jakie style na nim wymuszają. Będę bardzo zainteresowany wynikiem, a jeśli go nie masz, spędzę trochę czasu na jego poszukiwaniu później, gdy będę miał trochę czasu do stracenia.

FYI,

opacity: 1!important;

nie zastępuje go, więc nie jestem pewien, czy to krycie.

Steve Perks
źródło

dzięki! Nie mogłem znaleźć wyjaśnienia (nic takiego w arkuszu stylów klienta użytkownika Chrome - tylko „background-color: rgb (235, 235, 228)” dla wyłączonych wejść) i używam obejścia, ale nadal ciekawi mnie, co się dzieje dnia ...

Nawiasem mówiąc,

Steve, dziękuję za wysiłek, ale sugeruję, aby w przyszłości zamieścić to jako komentarz, a nie odpowiedź.

avernet

Answer 11

dzięki! Nie mogłem znaleźć wyjaśnienia (nic takiego w arkuszu stylów klienta użytkownika Chrome - tylko „background-color: rgb (235, 235, 228)” dla wyłączonych wejść) i używam obejścia, ale nadal ciekawi mnie, co się dzieje dnia ...

Nawiasem mówiąc,

Answer 12

Steve, dziękuję za wysiłek, ale sugeruję, aby w przyszłości zamieścić to jako komentarz, a nie odpowiedź.

avernet

Answer 13

Można zmienić kolor #440000tylko dla Safari, ale imho najlepszym rozwiązaniem byłoby nie do zmiany wyglądu przycisku w ogóle . Dzięki temu w każdej przeglądarce na każdej platformie będzie wyglądać tak, jak oczekują tego użytkownicy.

Answer 14

AKTUALIZACJA 2019:

Łączenie pomysłów z tej strony w rozwiązanie typu „ustaw i zapomnij”.

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

Możesz użyć atrybutu tylko do odczytu zamiast atrybutu wyłączonego, ale wtedy będziesz musiał dodać klasę, ponieważ nie ma wejścia pseudoklasy: tylko do odczytu.

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

Pamiętaj, że wyłączone wejście i wejście tylko do odczytu to nie to samo. Dane wejściowe tylko do odczytu mogą mieć fokus i będą wysyłać wartości po przesłaniu. Spójrz na w3.org

Serxipc
źródło

dzięki człowiekowi tak, to też był mój pierwszy pomysł, ale nie działa dla mnie ze względu na skupienie: na iPhonie klawiatura wyskakuje, gdy użytkownik dotknie elementu tylko do odczytu, i to jest mylące, znalazłem swoje obejście, a moje pytanie jest raczej „teoretyczne” - dlaczego takie zachowanie?

Nawiasem mówiąc,

Ciekawe obejście: problem koncentracji stwarza również problemy z użytecznością, w szczególności dla osób korzystających z czytników ekranu. W większości przypadków po prostu nie chcesz, aby użytkownicy mogli przechodzić tabulatorami do pól tylko do odczytu / wyłączonych w formularzu.

avernet

Answer 16

dzięki człowiekowi tak, to też był mój pierwszy pomysł, ale nie działa dla mnie ze względu na skupienie: na iPhonie klawiatura wyskakuje, gdy użytkownik dotknie elementu tylko do odczytu, i to jest mylące, znalazłem swoje obejście, a moje pytanie jest raczej „teoretyczne” - dlaczego takie zachowanie?

Nawiasem mówiąc,

Answer 17

Ciekawe obejście: problem koncentracji stwarza również problemy z użytecznością, w szczególności dla osób korzystających z czytników ekranu. W większości przypadków po prostu nie chcesz, aby użytkownicy mogli przechodzić tabulatorami do pól tylko do odczytu / wyłączonych w formularzu.

avernet

Answer 18

dla @ryan

Chciałem, aby moje wyłączone pole wprowadzania wyglądało jak normalne. To jedyna rzecz, która działałaby w Safari Mobile.

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

Answer 19

Jeśli chcesz naprawić problem dla wszystkich wyłączonych wejść, możesz zdefiniować -webkit-text-fill-colorto currentcolor, aby colorwłaściwość wejścia była używana.

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

Zobacz to skrzypce w Safari https://jsfiddle.net/u549yk87/3/

Answer 20

2

To pytanie jest bardzo stare, ale pomyślałem, że opublikuję zaktualizowane rozwiązanie webkit. Po prostu użyj następującego CSS:

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

conceptDawg
źródło

3

a dla przeglądarki Firefox użyj danych wejściowych: -moz-placeholder

stephan.com

1

eh .. to jest dla atrybutu zastępczego, nie sądzę, żeby miało to wpływ na wyłączone pola. Odpowiedź @ Kemo poniżej ( -webkit-text-fill-color) działa jednak

philfreo

Answer 21

3

a dla przeglądarki Firefox użyj danych wejściowych: -moz-placeholder

stephan.com

Answer 22

1

eh .. to jest dla atrybutu zastępczego, nie sądzę, żeby miało to wpływ na wyłączone pola. Odpowiedź @ Kemo poniżej ( -webkit-text-fill-color) działa jednak

philfreo

Answer 23

0

Czy zamiast wejścia można użyć przycisku?

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

źródło

nie bardzo ... w mojej prawdziwej aplikacji te pola tekstowe są zwykle włączone i używane do wprowadzania danych i tylko w pewnych warunkach są wyłączane za pomocą JavaScript. Mogę znaleźć obejście (np. zamień <input /> na styl <div> < / div> zamiast ustawienia

Nawiasem mówiąc

Answer 24

nie bardzo ... w mojej prawdziwej aplikacji te pola tekstowe są zwykle włączone i używane do wprowadzania danych i tylko w pewnych warunkach są wyłączane za pomocą JavaScript. Mogę znaleźć obejście (np. zamień <input /> na styl <div> < / div> zamiast ustawienia

Nawiasem mówiąc

Wyłączono kolor tekstu wejściowego

Odpowiedzi: