Placeholder text reinschreiben via stylish

  • Ich versuche mich derzeit an einem umstylen der Google Seite und möchte dazu gerne in einen input einen placeholder reinschreiben.

    Es geht um diesen Input:

    Code
    <input class="gsfi lst-d-f" id="lst-ib" maxlength="2048" name="q" autocomplete="off" title="Suche" type="text" value="" aria-label="Suche" aria-haspopup="false" role="combobox" aria-autocomplete="both" dir="ltr" spellcheck="false" style="border: none; padding: 0px; margin: 0px; height: auto; width: 100%; background-image: url(data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw%3D%3D); background-color: transparent; position: absolute; z-index: 6; left: 0px; outline: none; background-position: initial initial; background-repeat: initial initial;">

    Daher habe ich diesen Code hinzugefügt:

    Code
    .gsfi
    		{
    		placeholder="Suche eingeben"
    		}

    Damit will es aber irgendwie nicht funktionieren, schreibe ich es aber in das input via Entwickler-Tools rein wird es korrekt angezeigt.
    Weiss jemand wie ich das in eine Stylish Seite reinschreiben muss?

  • Wo genau schreibst du das so rein, wie es in deinem Code-Beispiel steht? Das kann nämlich überhaupt nicht funktionieren, weder gibt es eine CSS-Eigenschaft mit dem Namen placeholder noch ist das überhaupt CSS-Syntax, ein solches Konstrukt gibt es nicht. Und mit CSS kannst du keine HTML-Attribute bearbeiten. Da müsste man schon tricksen, um das mit Stylish zu bewerkstelligen.

  • Na gut ich weiss jetzt natürlich nicht ganz genau ob das im endeffekt html oder css ist :)

    Trage ich es so via Entwickler-Tools ein, funktioniert es:

    Code
    <input class="gsfi lst-d-f" id="lst-ib" maxlength="2048" name="q" placeholder="Suche eingeben" autocomplete="off" title="Suche" type="text" value="" aria-label="Suche" aria-haspopup="false" role="combobox" aria-autocomplete="both" dir="ltr" spellcheck="false" style="border: none; padding: 0px; margin: 0px; height: auto; width: 100%; background-image: url(data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw%3D%3D); background-color: transparent; position: absolute; z-index: 6; left: 0px; outline: none; background-position: initial initial; background-repeat: initial initial;">

    Sollte das mit Stylish nicht gehen, würde ich gerne Hinweise erhalten wie den sonst :)


    Es geht um dieses Attribut.

  • Ohne dir konkret helfen zu können, mal einige Hinweise:

    • Ich würde den Css-Code lieber auf „input“ beschränken.
    • Ein „!important“ kann immer wieder mal Wunder wirken.
    • (Nach eidt eingefügt, da zunächst glatt übersehen, vgl. Sörens Hinweis weiter unten) Doppelpunkt statt Gleichheitszeichen in CSS

    Das ergäbe mit Deinem Code:

    CSS
    input.gsfi {
        placeholder: "Suche eingeben" !important;
    }

    Aber:
    Ich habe hier mal eine Suche angeschmissen – Suche nach „css input placeholder“ bei DuckDuckGo – und finde gar keine CSS-Eigenschaft namens „placeholder“, sondern nur eine Pseudoklasse oder in neueren FFx-Versionen ein Pseudoelement, vgl. beispielsweise Change an input's HTML5 placeholder color with CSS oder HTML5 Placeholder Styling with CSS (beide etwa 5 Jahre alt, was bedeuten kann, dass die Informationen überholt sind). Die dazugehörige CSS-Eigenschaft wäre dann übrigens „content“, aber ob das so funktioniert, weiß ich nicht (der Sinn des Pseudoelements besteht darin, dass die Möglichkeiten absichtlich eingeschränkt sind). Der Code müsste für den Fux dann etwa so aussehen (Edit: Korrektur nach Hinweis von Sören:(

    CSS
    input.gsfi::-moz-placeholder {
        content: "Suche eingeben" !important;
    }

    Update:
    content“ funktioniert wohl doch nur mit „::before“ und „::after“, vergleiche CSS-Eigenschaften: content im SELFHTML-Wiki.

  • miku23: Mit Stylish kannst du kein HTML bearbeiten und HTML kann man grundsätzlich nicht so bearbeiten, wie von dir versucht. Wenn du HTML-Attribute verändern möchtest, brauchst du dafür JavaScript und Stylish kennt kein JavaScript. Du könntest es höchstes per Pseudoklasse und content-Eigenschaft versuchen, das ist in CSS die einzige (!) Möglichkeit, Inhalte auszugeben. Das ist nämlich absolut nicht der Job von CSS, CSS ist für die Gestaltung, für sonst nichts.

    Speravir: Dein Code kann nicht funktionieren, die Syntax ist genauso falsch wie im Beispiel von miku23. Gleichheitszeichen sind nicht erlaubt.

  • Danke, aber offenbar kann content nicht für input gebraucht werden da input eigentlich kein content hat...

    Hat sonst unabhängig davon jemand eine Idee wie man einen rahmenlosen input hervorhebt?
    Ich möchte eigentlich eine Suchleiste ähnlich wie hier einbauen:
    [Blockierte Grafik: https://lh3.googleusercontent.com/-el3iBbKHjP4/VTyi3xlfAHI/AAAAAAAAQj8/rpulb8G3qLE/w610-h307-no/youtube%2Bsearch.png]

    Ich habe mal an background-color gedacht, vielleicht in Zusammenhang mit einer pseudoklasse.
    Ist aber halt nicht ganz so toll wie placeholder.

  • Zitat von Sören Hentzschel

    Speravir: Dein Code kann nicht funktionieren, die Syntax ist genauso falsch wie im Beispiel von miku23. Gleichheitszeichen sind nicht erlaubt.

    Uppsala. Habbich glatt übersehen … ist nun oben korrigiert.

  • Zitat von miku23

    Kann aber gut möglich sein dass das gar kein CSS ist sondern html oder so,


    Das „oder so“ kannst Du streichen.

    Zitat von miku23

    Hat sonst unabhängig davon jemand eine Idee wie man einen rahmenlosen input hervorhebt?
    Ich habe mal an background-color gedacht, vielleicht in Zusammenhang mit einer pseudoklasse.
    Ist aber halt nicht ganz so toll wie placeholder.


    Ja, kann man. Du solltest doch tatsächlich mal auf den Suchlink klicken, den ich oben gepostet habe, und ein wenig in den Ergebnissen stöbern …

  • Ich habe mir die Ergebnisse schon angeschaut danke. Problemtisch ja aber dass aktuell gar kein Text als placeholder eingetragen ist und in deinen Links nur erklärt wird wie ich den Stil von existierendem placeholder anpassen kann.
    Oder habe ich was übersehen?

  • Zitat von miku23

    Danke, aber offenbar kann content nicht für input gebraucht werden da input eigentlich kein content hat...

    Daher sagte ich ja Pseudoklasse. Nur Pseudoklassen (bzw. -elemente) besitzen die content-Eigenschaft. Aber es stimmt, auf input-Elemente kann das nicht angewendet werden. Daher darfst du das nicht direkt auf das input-Feld anwenden, sondern auf den umliegenden Container.

    In der Art:

    Code
    div {
        position: relative;
    }
    
    
    div::before {
        content: 'test';
        position: absolute;
    }

    Das ist nur ein Beispielcode, "div" ist viel zu unspezifisch in der Praxis. Aber das verhält sich nicht wie ein placeholder, d.h. der Text verschwindet nicht per Klick. Vielleicht lässt sich da weiter tricksen, ich hab mir den Code der Seite nicht angesehen und vom Code hängt natürlich der Lösungsansatz ab, aber man sieht's daran ja, dass CSS dafür nicht gemacht ist.

  • Ich kämpfe derzeit noch ein wenig, vielleicht schaffe ich es noch den border auf 0px zu bringen :)


    Ich verwende Safari, aber das ist ja egal da Stylish auf allen Plattformen gleich funktioniert und grundlegend auch der CSS Code der gleiche ist.