Nieprawidłowy kolor tekstu wejściowego

Poniższy prosty kod HTML wyświetla się inaczej w przeglądarkach Firefox i WebKit (zaznaczono w Safari, Chrome i na telefonie iPhone).Nieprawidłowy kolor tekstu wejściowego

W przeglądarce Firefox zarówno obramowanie, jak i tekst mają ten sam kolor (#880000), ale w przeglądarce Safari tekst jest nieco jaśniejszy (tak, jakby zastosowano do niej przezroczystość).

Czy mogę jakoś to naprawić (usunąć tę przezroczystość w Safari)?

UPDATE:
Dziękuję za odpowiedzi. Nie potrzebuję tego do mojej pracy (zamiast wyłączania zastępuję elementy input z elementami stylu div), ale nadal jestem ciekawy, dlaczego tak się dzieje i czy istnieje sposób kontrolowania tego zachowania ...

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

Źródło

2008-11-04 Incidently

@ Poniższa odpowiedź Kemo jest poprawna - należy ją potwierdzić i zaakceptować. – philfreo

132

-webkit-text-fill-color:#880000

Źródło

2011-01-10 15:21:54 Kemo

tylko to rozwiązanie działa dla mnie.! powtórzyć.! dzięki – kajo

+43

Chciałem, aby moje wyłączone pole wejściowe wyglądało jak normalne. Jest to jedyna rzecz, która działałaby w Safari Mobile. -webkit-text-fill-color: rgba (0, 0, 0, 1); -webkit-nieprzezroczystość: 1; tło: biały; – Ryan

@Ryan ma rację - opacity musi być ustawione na "1" dla Mobile Safari. –

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

<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

2008-11-04 16:56:21

Nie do końca ... w mojej prawdziwej aplikacji te pola tekstowe są zwykle włączone i używane do wprowadzania danych i tylko pod pewnymi warunkami są wyłączane za pomocą JavaScript Mogę wymyślić obejście (np. Zastąpić stylem

zamiast ustawiania " wyłączone ") - ale naprawdę źle się czuje – Incidently

to ciekawe pytanie i próbowałem wiele nadpisania, aby zobaczyć, czy mogę dostać to dzieje, ale nic nie jest roboczego. Współczesne przeglądarki używają własnych arkuszy stylów, aby powiedzieć elementom, jak wyświetlać, więc może, jeśli możesz wyczuć arkusz stylów Chrome, zobaczysz, jakie style na niego nakładają. Będę bardzo zainteresowany rezultatem, a jeśli go nie posiadasz, poświęcę trochę czasu samemu na szukanie go później, kiedy mam trochę czasu do stracenia.

FYI,

opacity: 1!important;

nie zastąpi go, więc nie jestem pewien, że to zmętnienie.

Źródło

2008-11-04 23:22:57

dzięki! Nie mogłem znaleźć wytłumaczenia (nic takiego w arkuszu stylów użytkownika przeglądarki Chrome - tylko "background-color: rgb (235, 235, 228)" dla wyłączonych wejść) i używam obejścia, ale nadal jestem ciekaw, co to jest dzieje się ... – Incidently

Steve, dziękuję za trud, ale sugeruję, że w przyszłości zamieścisz to jako komentarz zamiast odpowiedzi. – avernet

dzięki! to jest to – Jonathan

Można zmienić kolor #440000 tylko dla Safari, ale IMHO najlepszym rozwiązaniem byłoby nie zmiana wygląda przycisku wcale. W ten sposób w każdej przeglądarce na każdej platformie będzie wyglądać tak, jak oczekują tego użytkownicy.

Źródło

2008-11-05 00:00:23 Kornel

Możesz użyć atrybutu readonly zamiast wyłączonego atrybutu, ale musisz dodać klasę, ponieważ nie ma w niej pseudoklasy: 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>

Należy pamiętać, że wyłączone wejście i wejście tylko do odczytu nie są takie same. Wejście tylko do odczytu może mieć fokus i wyśle wartości po przesłaniu. Spójrz na w3.org

Źródło

2008-11-05 16:27:44 Serxipc

dziękuję człowiekowi tak, to był mój pierwszy pomysł, ale to nie działa dla mnie z powodu ostrości: na iPhonie klawiatura wyskakuje, gdy użytkownik klika element tylko do odczytu, a to jest mylące Mam znalazłem moje obejście, a moje pytanie jest raczej "teoretyczne" - dlaczego to zachowanie? – Incidently

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

To pytanie jest bardzo stare, ale pomyślałem, że mogę opublikować zaktualizowane rozwiązanie webkit. Wystarczy użyć następującego CSS:

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

Źródło

2010-06-01 16:09:23 conceptDawg

i dla przeglądarki Firefox, użyj input: -moz-placeholder –

eh .. to jest dla atrybutu placeholder, nie sądzę, że ma wpływ na wyłączone pola. Odpowiedź @ Kemo poniżej ('-webkit-text-fill-color') działa chociaż – philfreo

Telefon i Tablet przeglądarek Webkit (Safari i Chrome) oraz pulpit IE mają szereg domyślnych zmian niepełnosprawnych elementów formularzy, które będzie trzeba zastąpić, jeśli chcesz w stylu niepełnosprawnych wejść.

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

Źródło

2014-05-07 07:20:59 lijinma

dla @ryan

chciałem moją niepełnosprawną pole wprowadzania, aby wyglądać jak normalny. Jest 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;

Źródło

2017-07-20 08:31:31 vanduc1102

Nieprawidłowy kolor tekstu wejściowego

Odpowiedz

Powiązane problemy