Changer l'apparence de la barre verticale d'un input text

Résolu
ProgProject Messages postés 81 Statut Membre -  
ProgProject Messages postés 81 Statut Membre -
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

  1. jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 832
     
    Bonjour

    en quel langage ?
    0
    1. ProgProject Messages postés 81 Statut Membre 2
       
      En html, css, php, JS comme vous voulez je m'adapte
      0
  2. Pitet Messages postés 2845 Statut Membre 530
     
    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
    0
    1. ProgProject Messages postés 81 Statut Membre 2
       
      dsl mais enfaite je veux pas :C:\Users\hp>--->
      mais sa: _ a la place de sa: |
      0
  3. Pitet Messages postés 2845 Statut Membre 530
     
    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
    0
    1. ProgProject Messages postés 81 Statut Membre 2
       
      enfaite ça marche pas
      0
    2. Pitet Messages postés 2845 Statut Membre 530
       
      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.
      0
    3. ProgProject Messages postés 81 Statut Membre 2
       
      enfaite au lieu d'un input j'ai du placer un immence testarea et enfaite sa ne va pas ducoup
      0