Changer une couleur d'espace réservé d'entrée HTML5 avec CSS

Jay Singh 20 février 2023

CSS CSS Color

Changer une couleur d'espace réservé d'entrée HTML5 avec CSS

Si vous voulez que votre site Web ou votre page Web se démarque de la foule, le code HTML seul ne suffira pas ; vous devrez le styliser avec les propriétés CSS.

En CSS, diverses propriétés et sélecteurs peuvent être utilisés pour styliser les composants HTML5 et les rendre plus conviviaux. En HTML5, différents sélecteurs CSS modifient la couleur du texte, la police, la taille de la police, l’alignement du texte et bien d’autres choses.

En HTML5, la propriété placeholder guide les utilisateurs à travers la bonne syntaxe en affichant un exemple. Avant que l’utilisateur n’entre une valeur, le navigateur indique le format.

Il est le plus souvent utilisé avec l’élément d’entrée HTML, qui permet aux utilisateurs de soumettre des informations telles que leur nom, leur âge, leur numéro de téléphone, etc. Cet article explique comment modifier la couleur de l’espace réservé d’une entrée HTML5 avec CSS.

Changer une couleur d’espace réservé d’entrée HTML5 avec CSS

Dans cet exemple, le sélecteur :: placeholder est utilisé dans Style CSS pour changer la couleur du texte de l’espace réservé en orange. Nous avons utilisé la balise <input> pour saisir le texte.

Cela ne prendra que des lettres. La propriété d’espace réservé est également utilisée pour la commodité de l’utilisateur.

Exemple 1:

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Placeholder Color</title>
        <style>
            ::placeholder{/* syntax for Chrome,Firefox,Mozilla browsers*/
            color:orange;
            }
        </style>
    </head>
    <body>
        <p>Please enter your name</p>
        <input type="text" placeholder="Text only">
    </body>
</html>

Dans l’exemple ci-dessous, nous avons commencé par créer un formulaire HTML à l’aide de l’élément <form>. A l’aide du sélecteur ::placeholder, la couleur du texte de l’espace réservé est modifiée pour les trois composants <input> du formulaire.

Exemple 2 :

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Placeholder2</title>
    </head>
    <style>
        ::placeholder{
        color: green;
        }
    </style>
    <body>
        <h2> Please fill the form</h2>
        <form>
            <input type="text" placeholder="Enter your name"><br>
            <input type="number" placeholder="Enter your age"><br>
            <input type="email" placeholder="Enter your email-id">
        </form>
    </body>
</html>

Changer une couleur d’espace réservé d’entrée HTML5 avec CSS

Article connexe - CSS Color