Une personnalisation de l'entrée de la zone de texte en html/html5

En fait, je veux mettre en œuvre une zone de texte comme indiqué dans la figure:Une personnalisation de l'entrée de la zone de texte en html/html5

Je veux que l'utilisateur doit être en mesure de saisir le numéro dans l'espace requis. Notons qu'il serait transparent, de sorte que l'arrière-plan est visible. Une solution impliquant html5 canvas serait également bon.

Donc, est-il possible de faire cela? Si oui, comment?

Avez-vous essayé? Comment est-ce que votre code de look? Peut-être essayer régulière champs de saisie et le style css.
c'est une simple zone de texte. Mon problème est de faire de la zone de texte juste souligner plutôt que de la zone de texte.
De toute façon résolu maintenant, merci à Christian.

OriginalL'auteur gopi1410 | 2012-05-10

  1. 12

    Ce que vous avez essayé jusqu'à présent? Vous avez assez bien répondu à votre propre question, de faire l'entrée d'un arrière-plan transparent.

    input {
    border: 0;
    outline: 0;
    background: transparent;
    border-bottom: 2px solid black;
    width: 20px;
}

    jsFiddle

    ah je suis bête, comment j'ai pu rater celui-là! Merci. En fait, je savais à propos de transparence, mais ne savait pas que la frontière:0 & outline:0 travail pour un champ de saisie. Je ne pouvais pas supprimer l'extérieur de la boîte dans le <input> tag

    OriginalL'auteur Christian Varga

  2. 0

    Ensemble <input> frontière seulement le bas côté. Voici la démo, tout comme votre photo spectacles.

    OriginalL'auteur ijse