Wie die Auffüllung der Platzhalter-text

Bin ich mit einem input-tag und haben ein Platzhalter-Wert in es. Nun, ich möchte, um die Polsterung für den Platzhalter text drin, aber ich kann nicht.

Hier ist, was ich versucht habe:

HTML

<form><input class="tbsearchbar" type="search" name="search_tb" placeholder="Test"></form>

CSS

placeholder {
    padding-top: 10px;
}
InformationsquelleAutor RS92 | 2015-05-20
  1. 10

    Nur hinzufügen Polsterung an den Eingang so:

    .tbsearchbar {
    padding-top: 10px;
    color: red; //To add some color.
}

    Ändern nur Platzhalter Farbe:

    ::-webkit-input-placeholder { /* WebKit browsers */
    color:    #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
   color:    #909;
}
    • Ok danke, wissen Sie, wie Sie text ändern, Farbe von dieser Platzhalter?
    • hinzufügen Farbe: rot; zu den css habe ich (rot oder irgendeine Farbe, die Sie mögen)
    • funktioniert nicht....
    • ich habe es ausprobiert und es funktioniert.
    • das ist die Farbe ändern, wenn ich schreiben, aber Start-Platzhalter ist Grau!!!
    • Sie müssen hinzufügen einige eigene Regeln pro browser aktualisieren jetzt.
    • Außer, dass änderungen der Polsterung für die Eingabe selbst zu.

    InformationsquelleAutor taxicala
  2. 2

    CSS:

    *{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
form{
    max-width: 400px;
    padding: 25px;
}
.tbsearchbar{
    width: 100%;
    padding: 10px;
    display: block;
    border: 2px solid #ccc;
    outline: none;
}
.tbsearchbar:focus{
    border: 2px solid #222;
}

.tbsearchbar::-webkit-input-placeholder { color: #f00;}
.tbsearchbar:-moz-placeholder {color: #f00;}
.tbsearchbar::-moz-placeholder {color: #f00;}
.tbsearchbar:-ms-input-placeholder {color: #f00;}

    HTML:

    <form>
    <input class="tbsearchbar"  type="search" name="search_tb" placeholder="Test" />
 </form>

    InformationsquelleAutor Dmitriy
  3. 0

    Dies ist der geeignete Weg, dies zu tun

    DEMO

    CSS für alle anderen Browser. 

    ::-webkit-input-placeholder {
   color: red;
}

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

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

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

input[type=search]
{
padding-top:10px;
}
    InformationsquelleAutor divy3993
  4. 0

    versuchen, diese 

    .tbsearchbar {
    padding: 10px;
    color: red;
}
    • geben Sie diesem einen Versuch wird es funktionieren
    InformationsquelleAutor Bilal Maqsood
  5. 0

    Das funktioniert (getestet auf Chrome):

    #yourid::placeholder {
    padding-left: 3px;
}

    Für alle Browser:

    #yourid::-webkit-input-placeholder { /* Chrome/Opera/Safari */
   padding-left: 3px;
}
#yourid::-moz-placeholder { /* Firefox 19+ */
   padding-left: 3px;
}
#yourid:-ms-input-placeholder { /* IE 10+ */
   padding-left: 3px;
}
#yourid:-moz-placeholder { /* Firefox 18- */
   padding-left: 3px;
}
    InformationsquelleAutor iPzard
Schreibe einen Kommentar