web-dev-qa-db-fra.com

Comment ajuster la taille du curseur (curseur clignotant) dans la barre de recherche avec css

J'ai essayé de le rechercher sur Google et, étonnamment, je n'ai trouvé aucun résultat lié. Je me demande comment utiliser CSS pour ajuster le curseur clignotant dans le champ de recherche avec CSS? semble que la taille du curseur clignotant est toujours originale petite taille du texte.

css3searchbar
18
weia design

'Caret' est le mot que vous recherchez. Je crois cependant que cela fait partie de la conception des navigateurs, et non à la portée de CSS.

Cependant, voici un article intéressant sur la simulation d’un changement de curseur utilisant Javascript et CSS http://www.dynamicdrive.com/forums/showthread.php?t=17450 Cela me semble un peu incertain, mais probablement le seul moyen d'accomplir la tâche. Le point principal de l'article est:

Nous aurons un texte clair quelque part sur l’écran, hors de la vue du spectateur et lorsque l'utilisateur clique sur notre "faux terminal", nous allons concentrez-vous sur la zone de texte et lorsque l'utilisateur commence à taper, nous allons simplement ajoutez les données saisies dans la zone de texte à notre "terminal" et c’est cette.

Ici est la démo en action. 

  1. Comme pour la démo, vous pouvez créer un champ de recherche à l'aide d'une div, copier le texte de l'entrée à l'aide de javascript, puis y ajouter votre curseur (créé avec css).
  2. Comme vous le savez, la taille de la police peut également modifier la taille du curseur. 

Vous pouvez également utiliser ce qui suit pour changer la couleur du curseur,

input{
  caret-color:red;
}
<input type="text">

4
Hardik Chaudhary

Rechercher Caret au lieu de Curseur vous donnera plus de résultats.

Apparemment, ce n'est pas possible dans une zone de texte, mais dans d'autres éléments via Javascript:

Jeter un coup d'œil à: 

Comment contrôler la taille du curseur/caret avec CSS

Comment modifier le curseur avec css

et 

Stylet de saisie de texte

3
Andrea Ligios

Il n’existe actuellement aucun moyen de styler le curseur, mais vous pouvez le faire si vous utilisez un autre élément DOM pour afficher la valeur de contrôle d’entrée. Jetez un oeil à Comment utiliser ce curseur carré dans un champ de saisie HTML?

 sample

2
sarkiroka

Si les majuscules conviennent dans votre contexte, vous pouvez utiliser l'attribut CSS font-variant: small-caps; pour obtenir le curseur plus grand que le texte.

Une autre approche consiste à créer votre propre curseur à l'aide d'un remplacement de champ de saisie. Quelqu'un a passé du temps et a obtenu un résultat positif , mais l'auteur recommande de continuer à utiliser le curseur standard.

1
Digitonaut

Vous ne pouvez pas changer la largeur du curseur (du moins pour le moment); Mais vous pouvez changer la couleur du curseur pour la majorité des navigateurs modernes

https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color

input {
 caret-color: red;
 caret-color: #ff0000;
 caret-color: rgb(255, 0, 0);
 caret-color: hsl(0, 97%, 50%);
}
1
Hossein

Comme je le sais, il n’existe aucun moyen direct d’appeler le curseur . À la place, voici quelques informations utiles qui peuvent vous aider à vous frayer un chemin à travers ces problèmes.

Par défaut, la hauteur du curseur correspond à la hauteur de la police. Le seul moment où elle ne le sera pas, c'est lorsque la hauteur de la ligne est spécifiée.

Ainsi, si vous souhaitez modifier la hauteur du curseur, vous pouvez le faire en utilisant la taille de police ou la hauteur de ligne si vous ne souhaitez pas modifier la taille de la police.

0
Oussama Bouthouri