Android的文本框使用HTML5/CSS3

Question

我想創建本框的佈局：

的一個電子郵件（或者他寫他的電話號碼），使用HTML5和CSS3。

的問題是這個文本框的要求：

• 它必須是響應的（寬度：100％）
• 我不想對任何懸停（無需底部邊框變得藍色）
• 我不想使用JavaScript

有什麼建議？我嘗試了幾種方法，但我總是遇到問題。

Answer 1

你具有的問題是，元素的寬度是由定義width加的padding（兩側）的和border-width（兩側）的。

爲了解決這個問題，在兼容的瀏覽器，使用box-sizing屬性設置爲border-box（其包括padding和border-width內定義的寬度），因此：

.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; 
} 

需要具有以下添加：

.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。

參考文獻：

• box-sizing。