Eingabetextfarbe deaktiviert

93

Der einfache HTML-Code unten wird in Firefox- und WebKit-basierten Browsern unterschiedlich angezeigt (ich habe in Safari, Chrome und iPhone eingecheckt).

In Firefox haben sowohl Rahmen als auch Text dieselbe Farbe ( #880000), aber in Safari wird der Text etwas heller (als ob etwas Transparenz darauf angewendet worden wäre).

Kann ich das irgendwie beheben (diese Transparenz in Safari entfernen)?

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

— Übrigens
quelle

Ich habe dies auch bemerkt, für mich ist dies ein Fehler, da beim Einfügen der Hintergrundfarbe: Weiß der Eingabe die Farbe wieder korrekt angezeigt wird. Auch die Deckkraft hat wenig Wirkung. Obwohl die -webkit-Text-Füllfarbe: # 880000 funktioniert

— Miguel

233

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

— Kemo
quelle

50

Ich wollte, dass mein deaktiviertes Eingabefeld wie ein normales aussieht. Dies ist das einzige, was in Safari Mobile funktionieren würde. -webkit-text-fill-color: rgba (0, 0, 0, 1); -Webkit-Opazität: 1; Hintergrund: weiß;

— Ryan

11

@Ryan hat Recht - die Deckkraft muss 1für Mobile Safari eingestellt sein.

— David Jones

7

opacity:1ist auch notwendig.

— Marcel Falliere

3

Opazität wird in aktuellen Builds von Safari ab Sommer 2016 nicht benötigt.

— Andy Mercer

2

Rettete meinen Tag! Dies wirkt sich jedoch auch auf die Farbgebung der placeholderTextfarbe des inputElements aus. Falls Sie auch eine Lösung dafür benötigen, sehen Sie sich diesen Link an: css-tricks.com/almanac/selectors/p/placeholder

— Lentyai

43

Telefon- und Tablet-Webkit-Browser (Safari und Chrome) und Desktop-IE haben eine Reihe von Standardänderungen an deaktivierten Formularelementen, die Sie überschreiben müssen, wenn Sie deaktivierte Eingaben formatieren möchten.

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

6

Es ist eine interessante Frage und ich habe viele Überschreibungen versucht, um zu sehen, ob ich sie in Gang bringen kann, aber nichts funktioniert. Moderne Browser verwenden tatsächlich ihre eigenen Stylesheets, um den Elementen mitzuteilen, wie sie angezeigt werden sollen. Wenn Sie also das Stylesheet von Chrome aufspüren können, können Sie sehen, welche Stile sie dazu zwingen. Ich werde sehr an dem Ergebnis interessiert sein und wenn Sie keines haben, werde ich ein wenig Zeit damit verbringen, es später zu suchen, wenn ich etwas Zeit zu verlieren habe.

Zu Ihrer Information,

opacity: 1!important;

überschreibt es nicht, daher bin ich mir nicht sicher, ob es undurchsichtig ist.

— Steve Perks
quelle

Vielen Dank! Ich konnte keine Erklärung finden (nichts dergleichen im Stylesheet des Chrome-Benutzeragenten - nur "Hintergrundfarbe: RGB (235, 235, 228)" für deaktivierte Eingaben) und verwende eine Problemumgehung, bin aber immer noch neugierig, was los ist am ...

— Übrigens

Steve, danke für die Mühe, aber ich schlage vor, dass du dies in Zukunft eher als Kommentar als als Antwort postest.

— Avernet

6

Sie könnten die Farbe #440000nur für Safari ändern , aber meiner Meinung nach wäre die beste Lösung, das Aussehen der Tasten überhaupt nicht zu ändern . Auf diese Weise sieht es in jedem Browser auf jeder Plattform so aus, wie Benutzer es erwarten.

— Kornel
quelle

5

AKTUALISIERT 2019:

Kombinieren Sie die Ideen dieser Seite zu einer "Set and Forget" -Lösung.

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

4

Sie können das readonly-Attribut anstelle des deaktivierten Attributs verwenden, müssen dann jedoch eine Klasse hinzufügen, da keine Pseudoklasseneingabe vorhanden ist: 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>

Beachten Sie, dass eine deaktivierte Eingabe und eine schreibgeschützte Eingabe nicht identisch sind. Eine schreibgeschützte Eingabe kann einen Fokus haben und sendet beim Senden Werte. Schau dir w3.org an

— Serxipc
quelle

danke man yep, das war auch meine erste idee, aber es funktioniert nicht für mich, weil ich mich darauf konzentriere: auf dem iPhone erscheint die Tastatur, wenn ein Benutzer auf ein schreibgeschütztes Element tippt, und das ist verwirrend. Ich habe meine Problemumgehung gefunden und meine Frage ist eher "theoretisch" - warum dieses Verhalten?

— Übrigens

Eine interessante Problemumgehung: Das Fokusproblem wirft auch Usability-Probleme auf, insbesondere für Benutzer von Screenreadern. In den meisten Fällen möchten Sie einfach nicht, dass Benutzer schreibgeschützte / deaktivierte Felder in einem Formular mit Registerkarten versehen können.

— Avernet

4

für @ryan

Ich wollte, dass mein deaktiviertes Eingabefeld wie ein normales aussieht. Dies ist das einzige, was in Safari Mobile funktionieren würde.

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

— vanduc1102
quelle

3

Wenn Sie das Problem für alle Behinderten - Eingänge korrigieren möchten, können Sie festlegen , -webkit-text-fill-colorzu currentcolor, so dass die colorgehen in das Eigentum des Eingangs verwendet werden.

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

Sehen Sie diese Geige auf Safari https://jsfiddle.net/u549yk87/3/

— Freez
quelle

2

Diese Frage ist sehr alt, aber ich dachte, ich würde eine aktualisierte Webkit-Lösung veröffentlichen. Verwenden Sie einfach das folgende CSS:

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

— conceptDawg
quelle

3

und für Firefox verwenden Sie Eingabe: -moz-Platzhalter

— stephan.com

1

eh .. das ist für das Platzhalterattribut, ich glaube nicht, dass sich das auf deaktivierte Felder auswirkt. @ Kemos Antwort unten ( -webkit-text-fill-color) funktioniert allerdings

— Philfreo

0

Können Sie eine Schaltfläche anstelle einer Eingabe verwenden?

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

nicht wirklich ... in meiner realen Anwendung werden diese Textfelder normalerweise aktiviert und für die Eingabe verwendet, und nur unter bestimmten Bedingungen werden sie mit JavaScript deaktiviert. Ich kann eine Problemumgehung finden (z. B. <input /> durch ein gestaltetes <div> <ersetzen / div> anstatt 'deaktiviert' zu setzen) - aber es fühlt sich wirklich falsch an

— übrigens