Wyłączono kolor tekstu wejściowego

95

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>

— Nawiasem mówiąc
źródło

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

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

43

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

— lijinma
źródło

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

6

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.

— Kornel
źródło

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

— paulcol.
źródło

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

4

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;

— vanduc1102
źródło

3

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/

— Zamrozić
źródło

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

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>

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