Comment définir la valeur de l'espace réservé à l'aide de CSS ?

Question

Je souhaite définir la valeur de l'espace réservé d'un champ de saisie en utilisant uniquement des feuilles de style en cascade, sans JavaScript ni jQuery.

Comment puis-je le faire ?

Answer 1

Vous pouvez le faire pour webkit :

#text2::-webkit-input-placeholder::before {
    color:#666;
    content:"Line 1\A Line 2\A Line 3\A";
}

http://jsfiddle.net/Z3tFG/1/

Answer 2

A priori, vous ne pouvez pas le faire uniquement avec les CSS. CSS a content mais même cette règle peut être utilisée pour insérer du contenu avant ou après un élément à l'aide de pseudo-sélecteurs. Vous devez recourir à javascript pour cela OU utiliser placeholder si vous utilisez HTML5, comme l'a souligné @Blender.

Answer 3

Un certain type de entrée n'a pas le pseudo-élément :after ou :before, vous pouvez donc utiliser une image d'arrière-plan avec un élément de texte SVG :

    input {
       background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='50px' width='120px'><text x='0' y='15' fill='gray' font-size='15'>Type Something...</text></svg>");
       background-repeat: no-repeat;
    }

    input:focus {
       background-image: none;
    }

Mon codepen : https://codepen.io/Scario/pen/BaagbeZ

Answer 4

Comme @Sarfraz a déjà mentionné CSS, j'ajouterai simplement HTML5 au mélange.

Vous pouvez utiliser le HTML5 placeholder attribut :

<input type="text" placeholder="Placeholder text blah blah." />

Answer 5

Si le contenu est de toute façon chargé via ajax, utilisez javascript pour manipuler le placeholder. Toute approche css est de toute façon du hack-isch. Par exemple, avec jQuery : $('#myFieldId').attr('placeholder', 'Search for Stuff');