Platzhalter mit css ausblenden

Lesezeit: 4 Minuten

Benutzer-Avatar
ial

Ich arbeite mit einem Responsive Theme. Und ich stehe hier vor dem Eingabeformularproblem. In der Desktop-Ansicht hat die Eingabe keinen Platzhalter, sondern eine Beschriftung.

Wenn es jedoch um die mobile Ansicht geht, werde ich diese Eingabebezeichnung ausblenden und diese Bezeichnung mit Platzhaltern ändern.

<input name="name" type="text" placehoder="insert your name"> 

Meine eigentliche Frage ist hier so einfach. Wie verstecke ich diesen Platzhalter mit CSS?

Danke im Voraus!

  • weil CSS das Attribut eines HTML-Tags nicht manipulieren kann. CSS kann den Stil bereitstellen. Sie können mit JavaScript/Jquery tun

    – Deepak Sharma

    12. Juni 2015 um 3:47 Uhr

  • Wenn Sie CSS verwenden, ist dies nicht möglich

    – Nhân Nguyễn

    12. Juni 2015 um 3:48 Uhr

  • Aber Sie können eine Sache versuchen. Legen Sie die Platzhalterfarbe als Hintergrundfarbe fest, damit es so aussieht, als hätten Sie keinen Platzhalter.

    – Deepak Sharma

    12. Juni 2015 um 3:49 Uhr

  • danke an alle. Alle unten aufgeführten Lösungen funktionieren wie ein Zauber!

    – ial

    12. Juni 2015 um 4:05 Uhr

Benutzer-Avatar
Luca Fagioli

Dadurch wird der Platzhalter nur für Desktops (und große Tablets) ausgeblendet:

@media (min-width:1025px) and (min-width:1281px) {
     ::-webkit-input-placeholder {
        /* WebKit browsers */
         color: transparent;
    }
     :-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
         color: transparent;
    }
     ::-moz-placeholder {
        /* Mozilla Firefox 19+ */
         color: transparent;
    }
     :-ms-input-placeholder {
        /* Internet Explorer 10+ */
         color: transparent;
    }
     input::placeholder {
         color: transparent;
    }
     textarea::-webkit-input-placeholder {
        /* WebKit browsers */
         color: transparent;
    }
     textarea:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
         color: transparent;
    }
     textarea::-moz-placeholder {
        /* Mozilla Firefox 19+ */
         color: transparent;
    }
     textarea:-ms-input-placeholder {
        /* Internet Explorer 10+ */
         color: transparent;
    }
     textarea::placeholder {
         color: transparent;
    }
}

Überprüfen Sie es auf Codepen.

  • wie man das mit dem Textfeld macht,!

    – ial

    12. Juni 2015 um 4:18 Uhr

  • Meine Antwort wurde so bearbeitet, dass sie Textarea enthält. Probieren Sie es aus und lassen Sie es mich wissen.

    – Luca Fagioli

    12. Juni 2015 um 20:10 Uhr

  • und neustes Chrom.

    – Nik M

    10. November 2017 um 7:42 Uhr

  • Anstatt zu verwenden color: transparenteinfach verwenden opacity: 0 damit es in den neuesten Browsern funktioniert.

    – Adam Reis

    14. Februar 2018 um 19:48 Uhr

  • Leute, was eigentlich nicht funktioniert hat, war das Stackoverflow-Snippet. Ich habe es entfernt und durch einen Codepen-Link ersetzt.

    – Luca Fagioli

    21. Juni 2019 um 7:50 Uhr

Benutzer-Avatar
Deepak Sharma

CSS stellt nur das Styling bereit, es kann den eigentlichen Platzhalter nicht entfernen.

Was Sie tun können, legen Sie die Textfarbe des Platzhalters als Hintergrundfarbe des Textfelds fest, damit es so aussieht, als hätten Sie keinen Platzhalter.

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #fff;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #fff;
    opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #fff;
    opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #fff;
}

Prüfen die Geige

  • Könnten Sie bitte erläutern, was Sie mit dem ersten Satz meinen? Ich verstehe die Aussage nicht ganz.

    – Hender

    23. September 2016 um 16:12 Uhr

  • @Henders .. 😉 hahah, es war nur ein Tippfehler, ich wollte sagen, CSS bietet nur Styling

    – Deepak Sharma

    26. September 2016 um 3:10 Uhr

  • Wenn Ihr Browser das Formatieren des Platzhalters unterstützt, unterstützt er auch rgba(255,255,255,0). Ihre Lösung funktioniert nur für weiße Eingaben.

    – Martijn

    20. Dezember 2016 um 11:04 Uhr

  • Vermisse ich, warum Sie nicht verwenden können display: none;, opacity: 0; oder visibility: hidden;?

    – BSG

    3. Oktober 2017 um 3:43 Uhr

  • @Edmund, er hat darum gebeten, den Platzhaltertext auszublenden. Nicht txtbox selbst. Wenn Sie Anzeige, Deckkraft oder Sichtbarkeit verwenden, wird txtbox selbst ausgeblendet. Die Anforderungen bestanden jedoch darin, nur Platzhaltertext in txtbox zu verstecken. Hoffe es macht Sinn.

    – Deepak Sharma

    4. Oktober 2017 um 4:18 Uhr

Benutzer-Avatar
Guruprasad J Rao

Sie können Medienabfragen verwenden und basierend auf der erforderlichen Auflösung ein- und ausblenden:

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
      ::-webkit-input-placeholder {
         color: lightgray !important; 
      }
      :-moz-placeholder { /* Firefox 18- */
         color: lightgray !important;  
      }

      ::-moz-placeholder {  /* Firefox 19+ */
         color: lightgray !important;  
      }

      :-ms-input-placeholder {  
         color: lightgray !important;  
      }
      #labelID
      {
         display:none !important;
      }
}

Normale Stile

::-webkit-input-placeholder {
         color: transparent;
}
:-moz-placeholder { /* Firefox 18- */
         color: transparent;
}

::-moz-placeholder {  /* Firefox 19+ */
         color: transparent;
}

:-ms-input-placeholder {  
         color: transparent;
}

#labelID{
        display:block;
}

Geben Sie dem Eingabefeld und dem Platzhaltertext dieselbe Farbe. Anders geht es mit CSS nicht.

@media all and (max-width:736px){
    ::-webkit-input-placeholder {
    color:white;
    }

    :-moz-placeholder { /* Firefox 18- */
    color:white;
    }

    ::-moz-placeholder {  /* Firefox 19+ */
    color:white;
    }

    :-ms-input-placeholder {  
    color:white;
    }   
    }

Sie sollten JS verwenden

$(window).resize(function(){
    if ($(window).width() >= 600){  
        $(':input').removeAttr('placeholder');
    }   
});

  • removeAttr wird nicht ausgeblendet, wenn der Benutzer das Bild wieder auf die ursprüngliche Größe zurücksetzt, ist der Text im Eingabefeld nicht vorhanden

    – Roger

    10. März 2018 um 11:30 Uhr

Benutzer-Avatar
Neophyt

<input name="name" type="text" id="id_here" placeholder="Your Label"> 

Blenden Sie den Platzhalter in der Desktop-Ansicht aus

input::-moz-placeholder {
  opacity: 0;
 }

ODER

input::-moz-placeholder {
   color:white;
}
  1. Ändern Sie die Eingabe (oder den Textbereich was auch immer) in #id_here oder den Klassennamen, wenn Sie nicht alle Eingaben auf der Website ändern möchten
  2. Verwenden Sie für verschiedene Browser

    -webkit-eingabeplatzhalter -ms-eingabeplatzhalter -moz-platzhalter

  • removeAttr wird nicht ausgeblendet, wenn der Benutzer das Bild wieder auf die ursprüngliche Größe zurücksetzt, ist der Text im Eingabefeld nicht vorhanden

    – Roger

    10. März 2018 um 11:30 Uhr

Benutzer-Avatar
Angelo – Fabiano Forni

Dieser Code/CSS zeigt den ‘Platzhalter’ nur im Fokus:

:not(:focus)::-webkit-input-placeholder {
    /* WebKit browsers */
    color: transparent;
}
:not(:focus):-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: transparent;
}
:not(:focus)::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: transparent;
}
:not(:focus):-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: transparent;
}

1283320cookie-checkPlatzhalter mit css ausblenden

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy