在HTML中輸入占位符標簽

Question

我已經為輸入框指定了100％的寬度，以固定到瀏覽器的寬度，但是當我添加占位符時，輸入框的寬度超出了瀏覽器的寬度，水平滾動條即將到來。 我不希望出現滾動條。 任何想法？？

這是我的輸入標簽

 <input type="tel" tabindex="9" maxlength="12" placeholder="XXX-XXX-XXXX" value="" name="mobileNumber" />

Answer 1

您可以為此使用box-sizing:border-box屬性。

input{
    width:100%;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
}

但是在IE7及以下版本中不起作用。

Answer 2

設為98％，而不是100％。 如果將寬度設置為100％，則表示內容寬度，元素所占的總寬度為100％加邊框寬度的兩倍加填充的兩倍。 98％的值當然只是一個猜測，但通常足夠好。

還有其他更好的方法。 為了提高可用性，可見寬度應反映預期的正常輸入的寬度，因此將HTML中的width屬性設置為適當的數字就足夠了。 （該值取決於您希望使用哪種號碼；國際電話號碼可能會很長。）

Answer 3

使用css3屬性的框大小，您可以重新定義寬度的含義，以包括外部填充和邊框（不是邊距）。

input{
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

不幸的是，因為它是CSS3，所以所有IE都不支持該屬性（IE6和IE7不支持）。 您可以在這里了解更多信息： w3schools