*::-webkit-input-placeholder

[Jnnbo]

Moin,

hat von euch jemand zufällig ein MAC mit einem aktuellen Safari? Wenn ja könntet ihr bitte kurz prüfen ob dieses CSS auch beim Safari greift?

http://jsfiddle.net/4o6b40ka/

*::-webkit-input-placeholder {
    color: rgba(0, 102, 0, 0.5);
}
*::-moz-placeholder {
    /* FF 19+ */
    color:  rgba(239, 239, 239, 0.6);
}
*:-ms-input-placeholder {
    /* IE 10+ */
    color:  rgba(239, 239, 239, 0.6);
}

[Matthias Apsel]

Hallo Jnnbo,

*::-webkit-input-placeholder {
    color: rgba(0, 102, 0, 0.5);
}
*::-moz-placeholder {
    /* FF 19+ */
    color:  rgba(239, 239, 239, 0.6);
}
*:-ms-input-placeholder {
    /* IE 10+ */
    color:  rgba(239, 239, 239, 0.6);
}

Es fehlt die präfixfreie Variante, auch wenn die derzeit noch von keinem Browser unterstützt wird, die Universalselektoren (*) kannst du dir auch klemmen.

::placeholder {
    color: rgba(239, 239, 239, 0.6);
}

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Es fehlt die präfixfreie Variante

Nein. Die Spec hat den Status „Working Draft“ und es ist explizit erwähnt, dass der Name noch nicht 100%ig feststeht.

Also präfixfreie Variante besser noch nicht verwenden, zumal

auch wenn die derzeit noch von keinem Browser unterstützt wird

Every Time You Call a Proprietary Feature “CSS3,” a Kitten Dies

LLAP 🖖

[Gunnar Bittersmann]

@@Jnnbo

hat von euch jemand zufällig ein MAC mit einem aktuellen Safari? Wenn ja könntet ihr bitte kurz prüfen ob dieses CSS auch beim Safari greift?

http://jsfiddle.net/4o6b40ka/

Ja, das tut es.

Ich finde es allerdings verwirrend, dass der Cursor mitten im Placeholder-Text erscheint.

*::-webkit-input-placeholder {
    color: rgba(0, 102, 0, 0.5);
}
*::-moz-placeholder {
    /* FF 19+ */
    color:  rgba(239, 239, 239, 0.6);
}
*:-ms-input-placeholder {
    /* IE 10+ */
    color:  rgba(239, 239, 239, 0.6);
}

Warum unterschiedliche Farben?

Håkan Save Hansson gibt zu bedenken: „Some browsers (Firefox tested) use opacity for placeholders. So, if you want to control the color with the color property alone, also remember to set opacity: 1.“

Warum rgba? Browser haben bei Transparenz immer mehr zu rechnen. Wenn das nicht notwendig ist, keine Transparenz verwenden. Scheint mir hier nicht notwendig zu sein, passe die Farbe entsprechend an.

Und warum <input type="submit" name="abschicken_telpruefen" id="abschicken_telpruefen" value="Telefonnummer prüfen" class="btn_telpruefen">?

Für Buttons ist das button-Element da: <button type="submit" name="abschicken_telpruefen" id="abschicken_telpruefen" class="btn_telpruefen">Telefonnummer prüfen</button>

(Wobei type="submit" Default ist, also auch weggelassen werden könnte.)

LLAP 🖖

[Jnnbo]

Hallo Gunnar,

Ja, das tut es.

Ok, dann bin ich hier schon einmal auf der sicheren Seite :)

Ich finde es allerdings verwirrend, dass der Cursor mitten im Placeholder-Text erscheint.

Wo soll ich ihn sonst blinken lassen? Ich hab text-align auf center gestellt, dass der Text zentriert im Feld steht.

*::-webkit-input-placeholder {
    color: rgba(0, 102, 0, 0.5);
}
*::-moz-placeholder {
    /* FF 19+ */
    color:  rgba(239, 239, 239, 0.6);
}
*:-ms-input-placeholder {
    /* IE 10+ */
    color:  rgba(239, 239, 239, 0.6);
}

Warum unterschiedliche Farben?

Ich wollte eigentlich dass der placeholder Text nur ganz schwach zu sehen ist. Aber du hast recht, ich kann einfach einen helleren Wert nehmen. Werde ich gleich ändern.

Für Buttons ist das button-Element da: <button type="submit" name="abschicken_telpruefen" id="abschicken_telpruefen" class="btn_telpruefen">Telefonnummer prüfen</button>

Ich weiß dieses hast du mir schon mehrmals geschrieben. Aber für was ist dann <input type="submit" da? Ich dachte immer, dieses ist extra für solche Zwecke entwickelt worden.

Was für Vorteile habe ich, wenn ich <button type="submit" oder auch nur <button> verwende?

[Auge]

Hallo

Für Buttons ist das button-Element da: <button type="submit" name="abschicken_telpruefen" id="abschicken_telpruefen" class="btn_telpruefen">Telefonnummer prüfen</button>

Ich weiß dieses hast du mir schon mehrmals geschrieben. Aber für was ist dann <input type="submit" da? Ich dachte immer, dieses ist extra für solche Zwecke entwickelt worden.

Was für Vorteile habe ich, wenn ich <button type="submit" oder auch nur <button> verwende?

Der Vorteil ist in Gunnars Beispiel schon zu sehen. Du hast <button> und <button/> und kannst zwischen den Tags etwas notieren. Das kann, wie bei Gunnar, Text sein. Es können aber auch andere HTML-Elemente sein. Das geht bei <input type="submit"> nicht.

Tschö, Auge

[Matthias Apsel]

Hallo Jnnbo,

Was für Vorteile habe ich, wenn ich <button type="submit" oder auch nur <button> verwende?

http://blog.selfhtml.org/2015/02/09/input-oder-button-fuer-submit-elemente/

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Jnnbo

http://jsfiddle.net/4o6b40ka/

Und warum <input type="text" name="telpruefen" id="telpruefen" placeholder="Telefonnummer eintragen" style="width: 100%; height: 3em; padding: 1.3em; text-align: center;font-size: 1.5em; border: 1px solid #efefef; background-color: #efefef;">?

Für Telefonnummern ist das <input type="tel">-Element da: Auf mobilen Geräten wird eine spezielle virtuelle Tastatur angezeigt.

Und sämtliche Darstellungsangaben gehören ins Stylesheet, nicht inline in style-Attribute.

LLAP 🖖

[Gunnar Bittersmann]

@@Jnnbo

hat von euch jemand zufällig ein MAC mit einem aktuellen Safari? Wenn ja könntet ihr bitte kurz prüfen ob dieses CSS auch beim Safari greift?

http://jsfiddle.net/4o6b40ka/

Das schon aber: Du missbrauchst Placeholder. Placeholder sind nicht dafür gedacht, die Beschriftung eines Eingabefelds zu ersetzen. [HTML5]

Dein Eingabefeld hat keinerlei Beschriftung, ist dadurch nicht barrierefrei bedienbar, kurz: es ist nicht bedienbar. Alle Eingabefelder sollten zugehörige label-Elemente haben.

(Zumal der Placeholder wegen der Farbangabe in Firefox und IE gar nicht sichtbar ist.)

<form name="telpruefen" method="post" action="">
  <label for="telpruefen">Telefonnummer</label>
  <input type="tel" name="telpruefen" id="telpruefen">
  <button type="submit" id="abschicken_telpruefen">Telefonnummer prüfen</button>
</form>

LLAP 🖖