Gibt es eine reine CSS-Methode, um eine Eingabe transparent zu machen?

Lesezeit: 3 Minuten

fmsf

Wie kann ich diese Eingabe transparent machen?

<input type="text" class="foo">

Ich habe das versucht, aber es funktioniert nicht.

background:transparent url(../img/transpSmall.png) repeat scroll 0 0;

Stellen Sie den Eingang so ein, dass er die gleiche Farbe hat wie das, was sich dahinter befindet.

– OMG Ponys

29. August 2009 um 17:53 Uhr
Sind Sie sicher, dass Sie nicht nur input type=”hidden” wollen?

– Rich Bradshaw

31. August 2009 um 11:58 Uhr
Könnte ein Spam-Honeypot sein, was eine legitime Verwendung wäre, obwohl es keine gute Idee ist, etwas sichtbares, aber dennoch fokussierbares zu haben.

– Kzqai

31. Mai 2011 um 14:15 Uhr
@Rich, dann kann es nicht bearbeitet werden … wenn Sie bereits die Farbe für das Containerset haben, warum sollten Sie es auch für das Eingabe-Tag festlegen?

– CaffGeek

27. September 2011 um 20:13 Uhr

input[type="text"]
{
    background: transparent;
    border: none;
}

Niemand wird überhaupt wissen, dass es da ist.

@Metropolis freut sich, berichten zu können, dass sich 2016 niemand darum kümmert

– Dennis

13. September 2016 um 22:52 Uhr
Dies bricht in Netscape 1.0 und Zune.

– Spitzmaus

29. Juni 2017 um 19:58 Uhr
Meine Kartoffel unterstützt das nicht

– BLAZORLOVER

13. Februar 2019 um 3:49 Uhr
Wenn Sie den Umriss auch entfernen möchten, wenn Sie fokussiert sind, versuchen Sie Folgendes: input[type="text"], input[type="text"]:focus { background: transparent; border: none; outline-width: 0; }

– Mubramaj

4. September 2020 um 16:55 Uhr
In meinem Fall funktioniert diese Lösung nur in Firefox und nicht in Chrome.

– Mohammad reza hedayat nia

1. Januar um 21:49 Uhr

Ich mache das gerne

input[type="text"]
{
    background: rgba(0, 0, 0, 0);
    border: none;
    outline: none;
}

Einstellung der outline Eigentum zu none hindert den Browser daran, das Feld hervorzuheben, wenn der Cursor eintritt

outline: none bricht die Zugänglichkeit der Tastatur. Siehe die Antwort von @derekshirk unten.

– Volker E.

19. Juni 2019 um 1:09 Uhr

Die beiden zuvor beschriebenen Methoden reichen heute nicht mehr aus. Ich persönlich verwende:

input[type="text"]{
    background-color: transparent;
    border: 0px;
    outline: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    width:5px;
    color:transparent;
    cursor:default;
}

Es entfernt auch den in einigen Browsern eingestellten Schatten, blendet den Text aus, der eingegeben werden könnte, und lässt den Cursor sich so verhalten, als wäre die Eingabe nicht vorhanden.

Vielleicht möchten Sie auch die Breite auf 0px setzen.

Wenn Sie den Umriss auch entfernen möchten, wenn Sie fokussiert sind, versuchen Sie Folgendes:

input[type="text"],
input[type="text"]:focus   
{
         background: transparent;
         border: none;
         outline-width: 0;
}

Ich habe die Deckkraft auf 0 gesetzt. Dadurch ist es verschwunden, funktioniert aber immer noch, wenn Sie darauf klicken.

derekshirk

Als allgemeine Regel sollten Sie die niemals vollständig entfernen outline oder :focus Stil.

https://a11yproject.com/posts/never-remove-css-outlines

…benutzen outline: none Ohne geeignete Fallbacks wird Ihre Website für Benutzer, die nur Tastaturen verwenden, erheblich weniger zugänglich, nicht nur für Benutzer mit eingeschränktem Sehvermögen. Achten Sie darauf, Ihren interaktiven Elementen immer einen sichtbaren Hinweis auf den Fokus zu geben.

Höhlenmensch

Falls Sie nur dessen Existenz benötigen, können Sie es auch damit vom Bildschirm werfen display: fixed; right: -1000px;. Dies ist nützlich, wenn Sie eine Eingabe zum Kopieren in die Zwischenablage benötigen. 🙂

12980200cookie-checkGibt es eine reine CSS-Methode, um eine Eingabe transparent zu machen?

#CSS #html