Changer l'apparence de la barre verticale d'un input text [Résolu/Fermé]

Signaler
Messages postés
71
Date d'inscription
vendredi 8 août 2014
Statut
Membre
Dernière intervention
20 juillet 2017
-
Messages postés
71
Date d'inscription
vendredi 8 août 2014
Statut
Membre
Dernière intervention
20 juillet 2017
-
Bonjour,
je suis entrain de créé mon deuxième site mais j'ai un problème (Je sais si je pose une question s'est que j'ai forcément un problème)
enfaîte je voudrais changer l'apparence de la barre verticale dans un input text:


en ça:



Si vous avez la réponce répondez-moi ça serais sympa

3 réponses

Messages postés
31087
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
18 janvier 2021
3 193
Bonjour

en quel langage ?
Messages postés
71
Date d'inscription
vendredi 8 août 2014
Statut
Membre
Dernière intervention
20 juillet 2017
2
En html, css, php, JS comme vous voulez je m'adapte
Messages postés
2371
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
13 janvier 2021
436
Salut,

Un début de solution :
<!-- HTML -->
<label class="prompt">
    C:\Users\hp>--->
    <input type="text" />
</label>

/* CSS */
.prompt, .prompt input {
    background-color: black;
    color: green;
    font-family: "Lucida Console";
}

.prompt {
    display: inline-block;
    border: solid 1px gray;
}

.prompt input {
    border: none;
}


Bonne journée
Messages postés
71
Date d'inscription
vendredi 8 août 2014
Statut
Membre
Dernière intervention
20 juillet 2017
2
dsl mais enfaite je veux pas :C:\Users\hp>--->
mais sa: _ a la place de sa: |
Messages postés
2371
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
13 janvier 2021
436
D'accord je n'avais pas du tout compris ta question.

Il ne semble pas exister de solution simple pour ce que tu souhaites, il existe néanmoins la solution proposée ici : https://stackoverflow.com/questions/3758023/how-to-use-this-square-cursor-in-a-html-input-field

Le principe est d'utiliser javascript pour "faire croire" à l'utilisateur qu'il saisie son texte dans un div en utilisant un input caché. Il suffit ensuite de styliser comme on le souhaite le div en question.

Bonne journée
Messages postés
71
Date d'inscription
vendredi 8 août 2014
Statut
Membre
Dernière intervention
20 juillet 2017
2
enfaite ça marche pas
Messages postés
2371
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
13 janvier 2021
436
La solution proposée fonctionne, il y as même un lien de démonstration pour t'aider : http://jsbin.com/ehuki3/3/edit

Merci de donner plus de détail si tu n'arrives pas à le faire fonctionner, puisque en fait ça marche bien.
Messages postés
71
Date d'inscription
vendredi 8 août 2014
Statut
Membre
Dernière intervention
20 juillet 2017
2
enfaite au lieu d'un input j'ai du placer un immence testarea et enfaite sa ne va pas ducoup