Accueil - CSS Tout afficher

Changer la couleur de l'espace réservé (placeholder)

Wakonda - CSS Posté le 28 mai 2024

Pour changer la couleur de l'espace réservé (placeholder) d'un champ de saisie HTML avec CSS, vous pouvez utiliser les pseudo-classes ::placeholder. Voici comment vous pouvez le faire :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Changer la couleur du placeholder</title>
    <style>
        input::placeholder {
            color: red; /* Changez cette valeur pour la couleur souhaitée */
            opacity: 1; /* Assurez-vous que l'opacité est définie à 1 pour que la couleur soit pleinement visible */
        }
    </style>
</head>
<body>
    <input type="text" placeholder="Entrez votre texte ici">
</body>
</html>

Explications :

  1. input::placeholder: Cette pseudo-classe cible le texte du placeholder à l'intérieur des éléments input.
  2. color: red;: Cette propriété CSS définit la couleur du texte du placeholder. Vous pouvez remplacer "red" par n'importe quelle couleur désirée (comme #ff0000 pour du rouge ou rgb(255,0,0)).
  3. opacity: 1;: Par défaut, certains navigateurs appliquent une opacité réduite aux placeholders. Cette ligne s'assure que la couleur du placeholder est pleinement visible.

Vous pouvez également appliquer des styles similaires aux placeholders dans les textarea ou d'autres types de champs en utilisant les mêmes sélecteurs.

Compatibilité des navigateurs

Les navigateurs récents supportent ::placeholder, mais pour une compatibilité plus large avec les anciennes versions de certains navigateurs, vous pouvez ajouter les préfixes spécifiques :

input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: red;
    opacity: 1;
}

input:-moz-placeholder { /* Mozilla Firefox 18- */
    color: red;
    opacity: 1;
}

input::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: red;
    opacity: 1;
}

input:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: red;
    opacity: 1;
}

input::placeholder { /* Standard syntaxe */
    color: red;
    opacity: 1;
}

En utilisant ces sélecteurs, vous vous assurez que le style du placeholder sera appliqué correctement à travers différents navigateurs et versions.

Lire ...

Centrer verticalement le contenu des pseudos élements :before et :after

Wakonda - CSS Posté le 9 août 2019

Centrer verticalement un élément en CSS est parfois difficile surtout quand il s'agit de pseudos éléments tels que :before ou :after. Toutefois, grâce à la propriété flex, cela devient plus facile.

Voici un exemple simple montrant un élément aligné verticalement. Il s'agit ici d'aligner une flèche d'un tableau servant à indiquer le sens de tri d'une colonne.

th::after {
  content: "↑";
  position: absolute;
  top: 0;
  right: 0;
  width: 30%;
  height: 100%;
  display:flex;
  flex-direction:row;
  align-items: center;
  justify-content: center;
}

 

Lire ...

Bootstrap - Centrer une image responsive

Wakonda - CSS Posté le 5 juin 2018

Avec Bootstrap 3, il existe deux classes CSS très pratiques qui permettent respectivement de rendre responsive une image tout en la centrant :

  • img-responsive
  • center-block

Exemple :

<img src="image.png" class="img-responsive center-block" />

 

Lire ...

CSS - Positionnement absolu

Wakonda - CSS Posté le 12 novembre 2017

La position absolue (position: absolute) permet de placer un élément sans que soit pris en compte l'ordre dans lequel les éléments HTML sont déclarés dans le code.

La position relative (position: relative) permet de placer un élément par rapport à une position de référence.

En CSS, il est possible de définir à partir de quel élément la position est absolue. Pour ce faire, il suffit de définir la propriété "position: relative" à l'élément parent à partir duquel on souhaite positionner notre élément absolu.

Dans l'exemple ci-dessous, on positionne un bouton en bas à gauche d'un div :

.container {
    border: 1px solid #E9E3DD;
    float: left;
    height: 210px;
    margin: 2px;
    padding: 4px 2px 10px 10px;
    text-align: left;
    width: 117px;
    position:relative;
}

#bottom_button {
   position:absolute;
   bottom:0;
   left:0;
}
<div class="container">
    <div id="bottom_button">
		<input type="submit" value="Submit">
	</div>
</div>

 

Lire ...

Font Awesome avec les lettres de l'alphabet

Wakonda - CSS, HTML Posté le 12 février 2017

Font Awesome est un fantastique outil utilisé par plusieurs centaines de milliers de sites Internet à travers le monde. Il fournit une multitude d'icônes facilement personnalisables et adaptables à n'importe quelles applications. Seulement, cette librairie a un manquement : comment peut-on faire des icônes avec des lettres de l'alphabet ? Heureusement, il existe une technique simple pour parvenir à cet objectif.

HTML :

<span class="fa fa-a"></span><br/>
<span class="fa fa-b"></span><br/>
<span class="fa fa-downcase-a"></span><br/>

CSS :

body {
    font-size: 14px;
}

.fa-a:before {
    font-family: Arial; /* your font family here! */
    font-weight: bold;
    content: 'A';
}

.fa-downcase-a:before {
    font-family: Arial; /* your font family here! */
    font-weight: bold;
    content: 'a';
}

.fa-b:before {
    font-family: Arial; /* your font family here! */
    font-weight: bold;
    content: 'B';
}

 

Lire ...

Alternance de couleurs en CSS

Wakonda - CSS Posté le 1 janvier 2016

Le code suivant, très simple, permet de produire une alternance de couleur entre une succession d'élément.

CSS

tr:nth-child(odd)
{
  background-color: red;
}

tr:nth-child(even)
{
  background-color: green;
}

HTML

<table>
  <tr>
    <td>Renault</td>
    <td>4L</td>
    <td>1987</td>
  </tr>
  <tr>
    <td>Ferrari</td>
    <td>Enzo</td>
    <td>2003</td>
  </tr>
  <tr>
    <td>Ford</td>
    <td>Mustang</td>
    <td>1977</td>
  </tr>
</table>

 

Lire ...

Désactiver un bouton radio (ou autres) en JQuery

Wakonda - CSS Posté le 1 janvier 2016

Ce mini-tutoriel présente une technique afin de désactiver techniquement et graphiquement un bouton radio.

HTML

<input id="form_radio_id" type="radio" value="3" name="form_transmission[sendingAlertType]" / >

JQUERY

$("#form_radio_id").attr('disabled','disabled');

En CSS, il existe un sélecteur permettant de sélectionner l’élément désactivé :

input:disabled + label {
  color: grey;
}

Dans l’exemple ci-dessus, on a grisé le texte du label qui se trouve immédiatement après le bouton de radio.

Lire ...

Empêcher le redimensionnement d’un « textarea »

Wakonda - CSS, HTML Posté le 25 juillet 2015

Par défaut, en HTML, l'élément Textarea peut être rédimensionné à l'infini. Heureusement, en CSS, il est possible d'empêcher cela de la manière suivante :

<textarea class="no-resize" ></textarea>

CSS :

.no-resize { resize: none; }

Permettre uniquement le redimensionnement horizontal :

.horizontal {
    resize: horizontal;
}

Permettre uniquement le redimensionnement vertical :

.vertical {
    resize: vertical;
}

 

Lire ...

Imprimer avec Javascript en format « paysage »

Wakonda - CSS, JavaScript Posté le 25 mai 2015
Il existe, en CSS, une multitude de propriétés permettant de mettre en forme une page Internet que l’on souhaite imprimer. Voici, donc, une astuce pour imprimer en mode « paysage ».

<style type="text/css" media="print">
    @page {
        size: landscape;
    }
</style>

 

Lire ...

Rechercher

Tags

Articles récents

Publicité

Suivez-nous

Aidez-nous !

Aidez-nous !