{"id":1187,"date":"2018-09-14T11:44:06","date_gmt":"2018-09-14T11:44:06","guid":{"rendered":"https:\/\/www.templatemonster.com\/fr\/blog\/?p=1187"},"modified":"2020-04-09T11:16:31","modified_gmt":"2020-04-09T11:16:31","slug":"comment-changer-la-couleur-du-texte-dun-placeholder","status":"publish","type":"post","link":"https:\/\/monsterspost.com\/fr\/comment-changer-la-couleur-du-texte-dun-placeholder\/","title":{"rendered":"Comment changer la couleur du texte d&#8217;un placeholder"},"content":{"rendered":"<p>Ce tutoriel montre comment <strong>changer la couleur du texte de placeholder d\u2019une entr\u00e9e<\/strong> de n'importe quelle forme.<\/p>\n<p>L'attribut placeholder sp\u00e9cifie un court indicateur qui d\u00e9crit la valeur attendue d'un champ de saisie (par exemple, une valeur d'exemple ou une br\u00e8ve description du format attendu). L'indicateur court s'affiche dans le champ de saisie avant que l'utilisateur n'entre une valeur.<\/p>\n<p>Par d\u00e9faut, le texte d'espace r\u00e9serv\u00e9 (placeholder) a une couleur gris clair (dans les navigateurs qui l'impl\u00e9mentent jusqu'\u00e0 pr\u00e9sent). Pour le personnaliser, vous aurez besoin des propri\u00e9t\u00e9s CSS du pr\u00e9fixe de fournisseur.<\/p>\n<p>Pour modifier la couleur par d\u00e9faut de l'espace r\u00e9serv\u00e9, vous devez effectuer les op\u00e9rations suivantes :<\/p>\n<ol>\n<li>Composer le code en fonction des informations ci-dessous (notez que vous devez mettre le m\u00eame code 4 fois pour chaque pr\u00e9fixe de fournisseur):\n<ul class=\"list\">\n<li class=\"first\">Le code suivant changera la couleur du\u00a0<span class=\"glossaryLink \" style=\"border-bottom: 1px dotted #c02929;text-decoration: none !important;cursor: pointer;border-top-color: #c02929;border-right-color: #c02929;border-left-color: #c02929\" data-cmtooltip=\"&lt;strong&gt;Placeholder&lt;\/strong&gt; in any form is a short hint (word, phrase, sentence) that describes the expected value of an input field (e.g. a sample value or a short description of the expected format). It is displayed in the input field before the user enters a value.&lt;br\/&gt;Term &lt;em&gt;'placeholder'&lt;\/em&gt; also refers to any kind of temporal content, e.g. text, images , etc. The most widespread placeholder text is Lorem Ipsum.&lt;br\/&gt;An example of the most common placeholder image is any of the default images provided in CMS or(...) &lt;strong&gt;&lt;\/strong&gt;\">placeholder<\/span> pour ces types d'entr\u00e9es :\u00a0<strong>text, search, url, tel, email et<\/strong>\u00a0<strong>password<\/strong>:\n<div>\n<div id=\"highlighter_441367\" class=\"syntaxhighlighter  css\">\n<table style=\"width: 772px\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"gutter\" style=\"width: 17px\">\n<div class=\"line number1 index0 alt2\">1<\/div>\n<div class=\"line number2 index1 alt1\">2<\/div>\n<div class=\"line number3 index2 alt2\">3<\/div>\n<div class=\"line number4 index3 alt1\">4<\/div>\n<div class=\"line number5 index4 alt2\">5<\/div>\n<div class=\"line number6 index5 alt1\">6<\/div>\n<div class=\"line number7 index6 alt2\">7<\/div>\n<div class=\"line number8 index7 alt1\">8<\/div>\n<div class=\"line number9 index8 alt2\">9<\/div>\n<div class=\"line number10 index9 alt1\">10<\/div>\n<div class=\"line number11 index10 alt2\">11<\/div>\n<div class=\"line number12 index11 alt1\">12<\/div>\n<div class=\"line number13 index12 alt2\">13<\/div>\n<div class=\"line number14 index13 alt1\">14<\/div>\n<div class=\"line number15 index14 alt2\">15<\/div>\n<div class=\"line number16 index15 alt1\">16<\/div>\n<\/td>\n<td class=\"code\" style=\"width: 754px\">\n<div class=\"container\">\n<div class=\"line number1 index0 alt2\"><code class=\"css plain\">input::-webkit-input-placeholder {<\/code><\/div>\n<div class=\"line number2 index1 alt1\"><code class=\"css keyword\">color<\/code><code class=\"css plain\">: <\/code><code class=\"css value\">red<\/code> <code class=\"css color3\">!important<\/code><code class=\"css plain\">;<\/code><\/div>\n<div class=\"line number3 index2 alt2\"><code class=\"css plain\">}<\/code><\/div>\n<div class=\"line number4 index3 alt1\"><\/div>\n<div class=\"line number5 index4 alt2\"><code class=\"css plain\">input:-moz-placeholder { <\/code><code class=\"css comments\">\/* Firefox 18- *\/<\/code><\/div>\n<div class=\"line number6 index5 alt1\"><code class=\"css keyword\">color<\/code><code class=\"css plain\">: <\/code><code class=\"css value\">red<\/code> <code class=\"css color3\">!important<\/code><code class=\"css plain\">;\u00a0 <\/code><\/div>\n<div class=\"line number7 index6 alt2\"><code class=\"css plain\">}<\/code><\/div>\n<div class=\"line number8 index7 alt1\"><\/div>\n<div class=\"line number9 index8 alt2\"><code class=\"css plain\">input::-moz-placeholder {\u00a0 <\/code><code class=\"css comments\">\/* Firefox 19+ *\/<\/code><\/div>\n<div class=\"line number10 index9 alt1\"><code class=\"css keyword\">color<\/code><code class=\"css plain\">: <\/code><code class=\"css value\">red<\/code> <code class=\"css color3\">!important<\/code><code class=\"css plain\">;\u00a0 <\/code><\/div>\n<div class=\"line number11 index10 alt2\"><code class=\"css plain\">}<\/code><\/div>\n<div class=\"line number12 index11 alt1\"><\/div>\n<div class=\"line number13 index12 alt2\"><code class=\"css plain\">input:-ms-input-placeholder {\u00a0 <\/code><\/div>\n<div class=\"line number14 index13 alt1\"><code class=\"css keyword\">color<\/code><code class=\"css plain\">: <\/code><code class=\"css value\">red<\/code> <code class=\"css color3\">!important<\/code><code class=\"css plain\">;\u00a0 <\/code><\/div>\n<div class=\"line number15 index14 alt2\"><code class=\"css plain\">}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-large wp-image-1189\" src=\"https:\/\/www.templatemonster.com\/blog\/fr\/wp-content\/uploads\/2018\/09\/How_to_change_the_placeholder_text_color_of_an_input-1-1024x576.jpg\" alt=\"\" width=\"710\" height=\"399\" srcset=\"https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/2018\/09\/How_to_change_the_placeholder_text_color_of_an_input-1-1024x576.jpg 1024w, https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/2018\/09\/How_to_change_the_placeholder_text_color_of_an_input-1-300x169.jpg 300w, https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/2018\/09\/How_to_change_the_placeholder_text_color_of_an_input-1-768x432.jpg 768w, https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/2018\/09\/How_to_change_the_placeholder_text_color_of_an_input-1.jpg 1280w\" sizes=\"(max-width: 710px) 100vw, 710px\" \/><\/li>\n<li>Le code suivant modifiera la couleur de l'espace r\u00e9serv\u00e9 pour les <strong>zones de texte<\/strong> (o\u00f9 g\u00e9n\u00e9ralement le corps du message du formulaire de contact est entr\u00e9) :\n<div>\n<div id=\"highlighter_5719\" class=\"syntaxhighlighter  css\">\n<div class=\"toolbar\"><\/div>\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"gutter\">\n<div class=\"line number1 index0 alt2\">1<\/div>\n<div class=\"line number2 index1 alt1\">2<\/div>\n<div class=\"line number3 index2 alt2\">3<\/div>\n<div class=\"line number4 index3 alt1\">4<\/div>\n<div class=\"line number5 index4 alt2\">5<\/div>\n<div class=\"line number6 index5 alt1\">6<\/div>\n<div class=\"line number7 index6 alt2\">7<\/div>\n<div class=\"line number8 index7 alt1\">8<\/div>\n<div class=\"line number9 index8 alt2\">9<\/div>\n<div class=\"line number10 index9 alt1\">10<\/div>\n<div class=\"line number11 index10 alt2\">11<\/div>\n<div class=\"line number12 index11 alt1\">12<\/div>\n<div class=\"line number13 index12 alt2\">13<\/div>\n<div class=\"line number14 index13 alt1\">14<\/div>\n<div class=\"line number15 index14 alt2\">15<\/div>\n<div class=\"line number16 index15 alt1\">16<\/div>\n<\/td>\n<td class=\"code\">\n<div class=\"container\">\n<div class=\"line number1 index0 alt2\"><code class=\"css plain\">textarea::-webkit-input-placeholder {<\/code><\/div>\n<div class=\"line number2 index1 alt1\"><code class=\"css keyword\">color<\/code><code class=\"css plain\">: <\/code><code class=\"css value\">green<\/code> <code class=\"css color3\">!important<\/code><code class=\"css plain\">;<\/code><\/div>\n<div class=\"line number3 index2 alt2\"><code class=\"css plain\">}<\/code><\/div>\n<div class=\"line number4 index3 alt1\"><\/div>\n<div class=\"line number5 index4 alt2\"><code class=\"css plain\">textarea:-moz-placeholder { <\/code><code class=\"css comments\">\/* Firefox 18- *\/<\/code><\/div>\n<div class=\"line number6 index5 alt1\"><code class=\"css keyword\">color<\/code><code class=\"css plain\">: <\/code><code class=\"css value\">green<\/code> <code class=\"css color3\">!important<\/code><code class=\"css plain\">;\u00a0 <\/code><\/div>\n<div class=\"line number7 index6 alt2\"><code class=\"css plain\">}<\/code><\/div>\n<div class=\"line number8 index7 alt1\"><\/div>\n<div class=\"line number9 index8 alt2\"><code class=\"css plain\">textarea::-moz-placeholder {\u00a0 <\/code><code class=\"css comments\">\/* Firefox 19+ *\/<\/code><\/div>\n<div class=\"line number10 index9 alt1\"><code class=\"css keyword\">color<\/code><code class=\"css plain\">: <\/code><code class=\"css value\">green<\/code> <code class=\"css color3\">!important<\/code><code class=\"css plain\">;\u00a0 <\/code><\/div>\n<div class=\"line number11 index10 alt2\"><code class=\"css plain\">}<\/code><\/div>\n<div class=\"line number12 index11 alt1\"><\/div>\n<div class=\"line number13 index12 alt2\"><code class=\"css plain\">textarea:-ms-input-placeholder {\u00a0 <\/code><\/div>\n<div class=\"line number14 index13 alt1\"><code class=\"css keyword\">color<\/code><code class=\"css plain\">: <\/code><code class=\"css value\">green<\/code> <code class=\"css color3\">!important<\/code><code class=\"css plain\">;\u00a0 <\/code><\/div>\n<div class=\"line number15 index14 alt2\"><code class=\"css plain\">}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-large wp-image-1190\" src=\"https:\/\/www.templatemonster.com\/blog\/fr\/wp-content\/uploads\/2018\/09\/How_to_change_the_placeholder_text_color_of_an_input-2-1024x576.jpg\" alt=\"\" width=\"710\" height=\"399\" srcset=\"https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/2018\/09\/How_to_change_the_placeholder_text_color_of_an_input-2-1024x576.jpg 1024w, https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/2018\/09\/How_to_change_the_placeholder_text_color_of_an_input-2-300x169.jpg 300w, https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/2018\/09\/How_to_change_the_placeholder_text_color_of_an_input-2-768x432.jpg 768w, https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/2018\/09\/How_to_change_the_placeholder_text_color_of_an_input-2.jpg 1280w\" sizes=\"(max-width: 710px) 100vw, 710px\" \/><\/li>\n<li class=\"last\">Le code suivant changera la couleur de l'espace r\u00e9serv\u00e9 sp\u00e9cifiquement pour un <strong>certain type d'entr\u00e9e<\/strong>, dans notre cas <strong>email\u00a0<\/strong>:\n<div>\n<div id=\"highlighter_379002\" class=\"syntaxhighlighter  css\">\n<div class=\"toolbar\"><\/div>\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"gutter\">\n<div class=\"line number1 index0 alt2\">1<\/div>\n<div class=\"line number2 index1 alt1\">2<\/div>\n<div class=\"line number3 index2 alt2\">3<\/div>\n<div class=\"line number4 index3 alt1\">4<\/div>\n<div class=\"line number5 index4 alt2\">5<\/div>\n<div class=\"line number6 index5 alt1\">6<\/div>\n<div class=\"line number7 index6 alt2\">7<\/div>\n<div class=\"line number8 index7 alt1\">8<\/div>\n<div class=\"line number9 index8 alt2\">9<\/div>\n<div class=\"line number10 index9 alt1\">10<\/div>\n<div class=\"line number11 index10 alt2\">11<\/div>\n<div class=\"line number12 index11 alt1\">12<\/div>\n<div class=\"line number13 index12 alt2\">13<\/div>\n<div class=\"line number14 index13 alt1\">14<\/div>\n<div class=\"line number15 index14 alt2\">15<\/div>\n<div class=\"line number16 index15 alt1\">16<\/div>\n<\/td>\n<td class=\"code\">\n<div class=\"container\">\n<div class=\"line number1 index0 alt2\"><code class=\"css plain\">input[type=<\/code><code class=\"css string\">\"email\"<\/code><code class=\"css plain\">]::-webkit-input-placeholder {<\/code><\/div>\n<div class=\"line number2 index1 alt1\"><code class=\"css keyword\">color<\/code><code class=\"css plain\">: <\/code><code class=\"css value\">blue<\/code> <code class=\"css color3\">!important<\/code><code class=\"css plain\">;<\/code><\/div>\n<div class=\"line number3 index2 alt2\"><code class=\"css plain\">}<\/code><\/div>\n<div class=\"line number4 index3 alt1\"><\/div>\n<div class=\"line number5 index4 alt2\"><code class=\"css plain\">input[type=<\/code><code class=\"css string\">\"email\"<\/code><code class=\"css plain\">]:-moz-placeholder { <\/code><code class=\"css comments\">\/* Firefox 18- *\/<\/code><\/div>\n<div class=\"line number6 index5 alt1\"><code class=\"css keyword\">color<\/code><code class=\"css plain\">: <\/code><code class=\"css value\">blue<\/code> <code class=\"css color3\">!important<\/code><code class=\"css plain\">;\u00a0 <\/code><\/div>\n<div class=\"line number7 index6 alt2\"><code class=\"css plain\">}<\/code><\/div>\n<div class=\"line number8 index7 alt1\"><\/div>\n<div class=\"line number9 index8 alt2\"><code class=\"css plain\">input[type=<\/code><code class=\"css string\">\"email\"<\/code><code class=\"css plain\">]::-moz-placeholder {\u00a0 <\/code><code class=\"css comments\">\/* Firefox 19+ *\/<\/code><\/div>\n<div class=\"line number10 index9 alt1\"><code class=\"css keyword\">color<\/code><code class=\"css plain\">: <\/code><code class=\"css value\">blue<\/code> <code class=\"css color3\">!important<\/code><code class=\"css plain\">;\u00a0 <\/code><\/div>\n<div class=\"line number11 index10 alt2\"><code class=\"css plain\">}<\/code><\/div>\n<div class=\"line number12 index11 alt1\"><\/div>\n<div class=\"line number13 index12 alt2\"><code class=\"css plain\">input[type=<\/code><code class=\"css string\">\"email\"<\/code><code class=\"css plain\">]:-ms-input-placeholder {\u00a0 <\/code><\/div>\n<div class=\"line number14 index13 alt1\"><code class=\"css keyword\">color<\/code><code class=\"css plain\">: <\/code><code class=\"css value\">blue<\/code> <code class=\"css color3\">!important<\/code><code class=\"css plain\">;\u00a0 <\/code><\/div>\n<div class=\"line number15 index14 alt2\"><code class=\"css plain\">}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-large wp-image-1191\" src=\"https:\/\/www.templatemonster.com\/blog\/fr\/wp-content\/uploads\/2018\/09\/How_to_change_the_placeholder_text_color_of_an_input-3-1024x576.jpg\" alt=\"\" width=\"710\" height=\"399\" srcset=\"https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/2018\/09\/How_to_change_the_placeholder_text_color_of_an_input-3-1024x576.jpg 1024w, https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/2018\/09\/How_to_change_the_placeholder_text_color_of_an_input-3-300x169.jpg 300w, https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/2018\/09\/How_to_change_the_placeholder_text_color_of_an_input-3-768x432.jpg 768w, https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/2018\/09\/How_to_change_the_placeholder_text_color_of_an_input-3.jpg 1280w\" sizes=\"(max-width: 710px) 100vw, 710px\" \/><\/li>\n<\/ul>\n<\/li>\n<li>Choisir un fichier dans lequel placer votre code. Vous pouvez le placer dans n\u2019importe quel fichier CSS de votre site, mais nous avons pr\u00e9par\u00e9 une liste de fichiers recommand\u00e9s pour chaque moteur de mod\u00e8le :<br \/>\n<h5>Mod\u00e8les CMS :<\/h5>\n<ul class=\"list\">\n<li class=\"first\">Th\u00e8mes WordPress (WooCommerce\/Jigoshop)\u00a0<em>\/wp-content\/themes\/themeXXXXX\/style.css<\/em><\/li>\n<li>Mod\u00e8les Joomla (<a class=\"aalmanual manual\" title=\"\" href=\"https:\/\/www.templatemonster.com\/fr\/type\/themes-virtuemart\/\" target=\"_blank\" rel=\"noopener noreferrer\">VirtueMart<\/a>)\u00a0<em>\/templates\/themeXXXX\/css\/template.css<\/em><\/li>\n<li>Th\u00e8mes Drupal\u00a0<em>\/sites\/all\/themes\/themeXXX\/css\/style.css<\/em><\/li>\n<li class=\"last\">Mod\u00e8les Web (HTML5)\u00a0<em>\/css\/style.css<\/em><\/li>\n<\/ul>\n<h5>Mod\u00e8les eCommerce :<\/h5>\n<ul class=\"list\">\n<li class=\"first\">Th\u00e8mes Magento <em>\/skin\/<span class=\"glossaryLink \" style=\"border-bottom: 1px dotted #c02929;text-decoration: none !important;cursor: pointer;border-top-color: #c02929;border-right-color: #c02929;border-left-color: #c02929\" data-cmtooltip=\"When talking about the &lt;strong&gt;&quot;frontend'&lt;\/strong&gt; of the website or a web application, what we mean is the visible part for the users. &lt;br\/&gt;Frontend is the part of the web that users interact with. It defines users interface.&lt;br\/&gt;Frontend includes web-design part as well as front-end web development.&lt;br\/&gt;The biggest part of what you see on the website is the mix of HTML, CSS, JavaScript rules, that is controlled by your web browser. &lt;br\/&gt;It is your browser that reads the code and translates it to the visual parts of the(...) &lt;strong&gt;&lt;\/strong&gt;\">frontend<\/span>\/default\/themeXXX\/css\/styles.css<\/em><\/li>\n<li>Th\u00e8mes PrestaShop <em>\/themes\/themeXXXX\/css\/global.css<\/em><\/li>\n<li><a class=\"aalmanual manual\" title=\"\" href=\"https:\/\/www.templatemonster.com\/fr\/type\/themes-opencart\/\" target=\"_blank\" rel=\"noopener noreferrer\">Mod\u00e8les OpenCart<\/a>\u00a0<em>\/catalog\/view\/theme\/themeXXX\/<span class=\"glossaryLink \" style=\"border-bottom: 1px dotted #c02929;text-decoration: none !important;cursor: pointer;border-top-color: #c02929;border-right-color: #c02929;border-left-color: #c02929\" data-cmtooltip=\"&lt;strong&gt;Style sheet&lt;\/strong&gt; is a file or form that defines the layout of a document. When you fill in a style sheet, you specify such parameters as the page size, margins, and fonts. Style sheets are useful because you can use the same style sheet for many documents. &lt;br\/&gt;Typically, a style sheet is specified at the beginning of an electronic document, either by embedding it or linking to it. This style sheet applies to the entire document. As necessary, specific elements of the overall style sheet can be(...) &lt;strong&gt;&lt;\/strong&gt;\">stylesheet<\/span>\/<span class=\"glossaryLink \" style=\"border-bottom: 1px dotted #c02929;text-decoration: none !important;cursor: pointer;border-top-color: #c02929;border-right-color: #c02929;border-left-color: #c02929\" data-cmtooltip=\"&lt;strong&gt;Style sheet&lt;\/strong&gt; is a file or form that defines the layout of a document. When you fill in a style sheet, you specify such parameters as the page size, margins, and fonts. Style sheets are useful because you can use the same style sheet for many documents. &lt;br\/&gt;Typically, a style sheet is specified at the beginning of an electronic document, either by embedding it or linking to it. This style sheet applies to the entire document. As necessary, specific elements of the overall style sheet can be(...) &lt;strong&gt;&lt;\/strong&gt;\">stylesheet<\/span>.css<\/em><\/li>\n<li>Mod\u00e8les ZenCart <em>\/includes\/templates\/themeXXX\/css\/<span class=\"glossaryLink \" style=\"border-bottom: 1px dotted #c02929;text-decoration: none !important;cursor: pointer;border-top-color: #c02929;border-right-color: #c02929;border-left-color: #c02929\" data-cmtooltip=\"&lt;strong&gt;Style sheet&lt;\/strong&gt; is a file or form that defines the layout of a document. When you fill in a style sheet, you specify such parameters as the page size, margins, and fonts. Style sheets are useful because you can use the same style sheet for many documents. &lt;br\/&gt;Typically, a style sheet is specified at the beginning of an electronic document, either by embedding it or linking to it. This style sheet applies to the entire document. As necessary, specific elements of the overall style sheet can be(...) &lt;strong&gt;&lt;\/strong&gt;\">stylesheet<\/span>.css<\/em><\/li>\n<li><a class=\"aalmanual manual\" title=\"\" href=\"https:\/\/www.templatemonster.com\/prestashop-themes.php\" target=\"_blank\" rel=\"noopener noreferrer\">Mod\u00e8les PrestaShop<\/a>\u00a0<em>\/css\/<span class=\"glossaryLink \" style=\"border-bottom: 1px dotted #c02929;text-decoration: none !important;cursor: pointer;border-top-color: #c02929;border-right-color: #c02929;border-left-color: #c02929\" data-cmtooltip=\"&lt;strong&gt;Style sheet&lt;\/strong&gt; is a file or form that defines the layout of a document. When you fill in a style sheet, you specify such parameters as the page size, margins, and fonts. Style sheets are useful because you can use the same style sheet for many documents. &lt;br\/&gt;Typically, a style sheet is specified at the beginning of an electronic document, either by embedding it or linking to it. This style sheet applies to the entire document. As necessary, specific elements of the overall style sheet can be(...) &lt;strong&gt;&lt;\/strong&gt;\">stylesheet<\/span>.css<\/em><\/li>\n<li class=\"last\">Th\u00e8mes Shopify <em>style.css.liquid<\/em><\/li>\n<\/ul>\n<\/li>\n<li>Enregistrez les modifications et t\u00e9l\u00e9chargez le fichier CSS sur votre serveur.<\/li>\n<\/ol>\n<p>N'h\u00e9sitez pas \u00e0 consulter le tutoriel vid\u00e9o d\u00e9taill\u00e9 ci-dessous\u00a0 :<\/p>\n<p><iframe loading=\"lazy\" title=\"How To Change The Placeholder Text Color Of An Input\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/ohGNOM82McM?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p>Vous pouvez aussi parcourir nos\u00a0<a title=\"Bootstrap Admin Themes\" href=\"https:\/\/www.templatemonster.com\/fr\/type\/modeles-pour-panneau-administration\/\" target=\"_blank\" rel=\"noopener noreferrer\">Mod\u00e8les pour panneaux d'administration<\/a>, si vous avez besoin de plus de th\u00e8mes avec la fonctionnalit\u00e9 CSS.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ce tutoriel montre comment changer la couleur du texte de placeholder d\u2019une entr\u00e9e de n'importe quelle forme. L'attribut placeholder sp\u00e9cifie un court indicateur qui d\u00e9crit la valeur attendue d'un champ de saisie (par exemple, une valeur d'exemple ou une br\u00e8ve description du format attendu). L'indicateur court s'affiche dans le champ de saisie avant que l'utilisateur [&hellip;]<\/p>\n","protected":false},"author":1672325,"featured_media":1195,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[29,25],"tags":[99,7],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.11 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Comment changer la couleur du texte d&#039;un placeholder \u2b50 TemplateMonster Blog France<\/title>\n<meta name=\"description\" content=\"Ce tutoriel montre comment changer la couleur du texte de placeholder d\u2019une entr\u00e9e de n&#039;importe quelle forme. L&#039;attribut placeholder sp\u00e9cifie un court\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/monsterspost.com\/fr\/comment-changer-la-couleur-du-texte-dun-placeholder\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Comment changer la couleur du texte d&#039;un placeholder \u2b50 TemplateMonster Blog France\" \/>\n<meta property=\"og:description\" content=\"Ce tutoriel montre comment changer la couleur du texte de placeholder d\u2019une entr\u00e9e de n&#039;importe quelle forme. L&#039;attribut placeholder sp\u00e9cifie un court\" \/>\n<meta property=\"og:url\" content=\"https:\/\/monsterspost.com\/fr\/comment-changer-la-couleur-du-texte-dun-placeholder\/\" \/>\n<meta property=\"og:site_name\" content=\"TemplateMonster Blog France\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/TemplateMonsterFrance\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-09-14T11:44:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-04-09T11:16:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/2018\/09\/laptop-work-1148958_1280.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"853\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Claire\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@TM_France\" \/>\n<meta name=\"twitter:site\" content=\"@TM_France\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Claire\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/monsterspost.com\/fr\/comment-changer-la-couleur-du-texte-dun-placeholder\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/fr\/comment-changer-la-couleur-du-texte-dun-placeholder\/\"},\"author\":{\"name\":\"Claire\",\"@id\":\"https:\/\/monsterspost.com\/fr\/#\/schema\/person\/4884946d097972046d54ec3b5524621c\"},\"headline\":\"Comment changer la couleur du texte d&#8217;un placeholder\",\"datePublished\":\"2018-09-14T11:44:06+00:00\",\"dateModified\":\"2020-04-09T11:16:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/monsterspost.com\/fr\/comment-changer-la-couleur-du-texte-dun-placeholder\/\"},\"wordCount\":409,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/fr\/#organization\"},\"keywords\":[\"Astuces\",\"D\u00e9veloppement Web\"],\"articleSection\":[\"D\u00e9veloppement Web\",\"Tutoriels\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/monsterspost.com\/fr\/comment-changer-la-couleur-du-texte-dun-placeholder\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/monsterspost.com\/fr\/comment-changer-la-couleur-du-texte-dun-placeholder\/\",\"url\":\"https:\/\/monsterspost.com\/fr\/comment-changer-la-couleur-du-texte-dun-placeholder\/\",\"name\":\"Comment changer la couleur du texte d'un placeholder \u2b50 TemplateMonster Blog France\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/fr\/#website\"},\"datePublished\":\"2018-09-14T11:44:06+00:00\",\"dateModified\":\"2020-04-09T11:16:31+00:00\",\"description\":\"Ce tutoriel montre comment changer la couleur du texte de placeholder d\u2019une entr\u00e9e de n'importe quelle forme. L'attribut placeholder sp\u00e9cifie un court\",\"breadcrumb\":{\"@id\":\"https:\/\/monsterspost.com\/fr\/comment-changer-la-couleur-du-texte-dun-placeholder\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/monsterspost.com\/fr\/comment-changer-la-couleur-du-texte-dun-placeholder\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/monsterspost.com\/fr\/comment-changer-la-couleur-du-texte-dun-placeholder\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/monsterspost.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Comment changer la couleur du texte d&#8217;un placeholder\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/monsterspost.com\/fr\/#website\",\"url\":\"https:\/\/monsterspost.com\/fr\/\",\"name\":\"TemplateMonster Blog France\",\"description\":\"Just another MonsterPost Sites site\",\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/monsterspost.com\/fr\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/monsterspost.com\/fr\/#organization\",\"name\":\"MonsterPost France\",\"url\":\"https:\/\/monsterspost.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/monsterspost.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/2020\/03\/Logo-TM.png\",\"contentUrl\":\"https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/2020\/03\/Logo-TM.png\",\"width\":180,\"height\":180,\"caption\":\"MonsterPost France\"},\"image\":{\"@id\":\"https:\/\/monsterspost.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.instagram.com\/template_monster\/\",\"https:\/\/www.pinterest.com\/templatemonster\/\",\"https:\/\/www.youtube.com\/user\/TemplateMonsterCo\/\",\"https:\/\/www.facebook.com\/TemplateMonsterFrance\/\",\"https:\/\/twitter.com\/TM_France\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/monsterspost.com\/fr\/#\/schema\/person\/4884946d097972046d54ec3b5524621c\",\"name\":\"Claire\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/monsterspost.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/db0976148c5793ad6317a44bd5f93582?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/db0976148c5793ad6317a44bd5f93582?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"caption\":\"Claire\"},\"description\":\"Claire est une \u00e9crivaine talentueuse et curieuse. Sa principale priorit\u00e9 est de transmettre en termes simples des informations difficiles. Elle adore le monde de la conception Web et partage des trucs sympas sur sa page Facebook. Elle s'int\u00e9resse \u00e9galement activement \u00e0 la litt\u00e9rature, aux traductions et communique avec plaisir avec les abonn\u00e9s en ligne.\",\"url\":\"https:\/\/monsterspost.com\/fr\/author\/claire\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Comment changer la couleur du texte d'un placeholder \u2b50 TemplateMonster Blog France","description":"Ce tutoriel montre comment changer la couleur du texte de placeholder d\u2019une entr\u00e9e de n'importe quelle forme. L'attribut placeholder sp\u00e9cifie un court","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/monsterspost.com\/fr\/comment-changer-la-couleur-du-texte-dun-placeholder\/","og_locale":"fr_FR","og_type":"article","og_title":"Comment changer la couleur du texte d'un placeholder \u2b50 TemplateMonster Blog France","og_description":"Ce tutoriel montre comment changer la couleur du texte de placeholder d\u2019une entr\u00e9e de n'importe quelle forme. L'attribut placeholder sp\u00e9cifie un court","og_url":"https:\/\/monsterspost.com\/fr\/comment-changer-la-couleur-du-texte-dun-placeholder\/","og_site_name":"TemplateMonster Blog France","article_publisher":"https:\/\/www.facebook.com\/TemplateMonsterFrance\/","article_published_time":"2018-09-14T11:44:06+00:00","article_modified_time":"2020-04-09T11:16:31+00:00","og_image":[{"width":1280,"height":853,"url":"https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/2018\/09\/laptop-work-1148958_1280.jpg","type":"image\/jpeg"}],"author":"Claire","twitter_card":"summary_large_image","twitter_creator":"@TM_France","twitter_site":"@TM_France","twitter_misc":{"\u00c9crit par":"Claire","Dur\u00e9e de lecture estim\u00e9e":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/monsterspost.com\/fr\/comment-changer-la-couleur-du-texte-dun-placeholder\/#article","isPartOf":{"@id":"https:\/\/monsterspost.com\/fr\/comment-changer-la-couleur-du-texte-dun-placeholder\/"},"author":{"name":"Claire","@id":"https:\/\/monsterspost.com\/fr\/#\/schema\/person\/4884946d097972046d54ec3b5524621c"},"headline":"Comment changer la couleur du texte d&#8217;un placeholder","datePublished":"2018-09-14T11:44:06+00:00","dateModified":"2020-04-09T11:16:31+00:00","mainEntityOfPage":{"@id":"https:\/\/monsterspost.com\/fr\/comment-changer-la-couleur-du-texte-dun-placeholder\/"},"wordCount":409,"commentCount":0,"publisher":{"@id":"https:\/\/monsterspost.com\/fr\/#organization"},"keywords":["Astuces","D\u00e9veloppement Web"],"articleSection":["D\u00e9veloppement Web","Tutoriels"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/monsterspost.com\/fr\/comment-changer-la-couleur-du-texte-dun-placeholder\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/monsterspost.com\/fr\/comment-changer-la-couleur-du-texte-dun-placeholder\/","url":"https:\/\/monsterspost.com\/fr\/comment-changer-la-couleur-du-texte-dun-placeholder\/","name":"Comment changer la couleur du texte d'un placeholder \u2b50 TemplateMonster Blog France","isPartOf":{"@id":"https:\/\/monsterspost.com\/fr\/#website"},"datePublished":"2018-09-14T11:44:06+00:00","dateModified":"2020-04-09T11:16:31+00:00","description":"Ce tutoriel montre comment changer la couleur du texte de placeholder d\u2019une entr\u00e9e de n'importe quelle forme. L'attribut placeholder sp\u00e9cifie un court","breadcrumb":{"@id":"https:\/\/monsterspost.com\/fr\/comment-changer-la-couleur-du-texte-dun-placeholder\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/monsterspost.com\/fr\/comment-changer-la-couleur-du-texte-dun-placeholder\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/monsterspost.com\/fr\/comment-changer-la-couleur-du-texte-dun-placeholder\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/monsterspost.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Comment changer la couleur du texte d&#8217;un placeholder"}]},{"@type":"WebSite","@id":"https:\/\/monsterspost.com\/fr\/#website","url":"https:\/\/monsterspost.com\/fr\/","name":"TemplateMonster Blog France","description":"Just another MonsterPost Sites site","publisher":{"@id":"https:\/\/monsterspost.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/monsterspost.com\/fr\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/monsterspost.com\/fr\/#organization","name":"MonsterPost France","url":"https:\/\/monsterspost.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/monsterspost.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/2020\/03\/Logo-TM.png","contentUrl":"https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/2020\/03\/Logo-TM.png","width":180,"height":180,"caption":"MonsterPost France"},"image":{"@id":"https:\/\/monsterspost.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/template_monster\/","https:\/\/www.pinterest.com\/templatemonster\/","https:\/\/www.youtube.com\/user\/TemplateMonsterCo\/","https:\/\/www.facebook.com\/TemplateMonsterFrance\/","https:\/\/twitter.com\/TM_France"]},{"@type":"Person","@id":"https:\/\/monsterspost.com\/fr\/#\/schema\/person\/4884946d097972046d54ec3b5524621c","name":"Claire","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/monsterspost.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/db0976148c5793ad6317a44bd5f93582?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/db0976148c5793ad6317a44bd5f93582?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","caption":"Claire"},"description":"Claire est une \u00e9crivaine talentueuse et curieuse. Sa principale priorit\u00e9 est de transmettre en termes simples des informations difficiles. Elle adore le monde de la conception Web et partage des trucs sympas sur sa page Facebook. Elle s'int\u00e9resse \u00e9galement activement \u00e0 la litt\u00e9rature, aux traductions et communique avec plaisir avec les abonn\u00e9s en ligne.","url":"https:\/\/monsterspost.com\/fr\/author\/claire\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/posts\/1187"}],"collection":[{"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/users\/1672325"}],"replies":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/comments?post=1187"}],"version-history":[{"count":5,"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/posts\/1187\/revisions"}],"predecessor-version":[{"id":3677,"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/posts\/1187\/revisions\/3677"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/media\/1195"}],"wp:attachment":[{"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/media?parent=1187"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/categories?post=1187"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/tags?post=1187"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}