Android en utilisant HTML5 Textbox/CSS3

Question

Je veux créer la mise en page de cette zone de texte:

L'un pour le courrier électronique (ou où il écrit son numéro de téléphone) en utilisant HTML5 et CSS3.

Le problème est que les exigences de cette zone de texte:

• il doit être sensible (largeur: 100%)
• Je ne veux rien sur le vol stationnaire (pas besoin de la bordure inférieure pour devenir bleu)
• Je ne veux pas utiliser JavaScript

Toutes les suggestions? J'ai essayé plusieurs façons mais j'ai toujours des problèmes.

Answer 1

Le problème vous ont eu est que la largeur d'un élément est composé du width défini ainsi la padding (des deux côtés) et la border-width (des deux côtés).

Pour contourner ce problème, dans les navigateurs compatibles, utilisez l'ensemble de la propriété box-sizing-border-box (qui comprend le padding et border-widthintérieur la largeur définie), donc:

.textbox{ 
    border: 0; 
    border-bottom: 1px solid rgb(160,160,160); 
    background-color: transparent; 
    width: 100%; 
    margin-left: -1px; 
    margin-right: -1px; 
    /*padding-left: 5px;*/ 
    float: left; 
} 

a besoin d'avoir ce qui suit ajouté :

.textbox { 
    /* the above not changed, the following added */ 
    padding-left: 2em; /* an arbitrary dimension to demonstrate, adjust to taste */ 
    box-sizing: border-box; 
} 

JS Fiddle demo.

Références:

• box-sizing.