it-swarm.com.de

Eingabetextfarbe deaktiviert

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

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

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

PDATE:
Danke für deine Antworten. Ich brauche das nicht mehr für meine Arbeit (anstatt es zu deaktivieren, ersetze ich input Elemente durch gestaltete div Elemente), aber ich bin immer noch neugierig, warum dies passiert und ob es welche gibt Weg, um dieses Verhalten zu steuern ...

<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>
77
Incidently
-webkit-text-fill-color: #880000;
opacity: 1; /* required on iOS */
186
Kemo

Webkit-Browser für Telefone und Tablets (Safari und Chrome) und Desktops 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 */
42
lijinma

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

6
Kornel

es ist eine interessante Frage und ich habe viele Überschreibungen versucht, um zu sehen, ob ich es in Gang bringen kann, aber nichts funktioniert. Moderne Browser verwenden ihre eigenen Stylesheets, um den Elementen die Anzeige zu erläutern. Wenn Sie also das Stylesheet von Chrome herausfinden können, können Sie sehen, welche Styles sie erzwingen. Ich bin sehr interessiert an dem Ergebnis, und wenn Sie keines haben, werde ich ein wenig selbst danach suchen, wenn ich etwas Zeit habe, um es zu verschwenden.

Zu Ihrer Information,

opacity: 1!important;

überschreibt es nicht, also bin ich mir nicht sicher, ob es Opazität ist.

6
Steve Perks

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;
4
vanduc1102

Sie können das Attribut readonly anstelle des Attributs disabled 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 ein deaktivierter und ein schreibgeschützter Eingang nicht identisch sind. Eine schreibgeschützte Eingabe kann den Fokus haben und sendet beim Senden Werte. Schauen Sie sich w3.org an

4
Serxipc

Wenn Sie das Problem für alle deaktivierten Eingänge beheben möchten, können Sie -webkit-text-fill-color bis currentcolor, daher wird die Eigenschaft color der Eingabe verwendet.

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

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

2
Freez

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

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

AKTUALISIERT 2019:

Kombinieren Sie die Ideen von 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 */
}
2
paulcol.

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