html - HTML5/CSS3 を使用した Android テキストボックス

Question

このテキストボックスのレイアウトを作成したい:

と を使用した電子メール (または彼が電話番号を書いている場所) 用のHTML5ものCSS3。

問題は、このテキスト ボックスの要件です。

• レスポンシブである必要があります (幅: 100%)
• ホバーしたいものはありません（下の境界線が青くなる必要はありません）
• JavaScript を使いたくない

助言がありますか？いくつかの方法を試しましたが、常に問題があります。

Answer 1

あなたが抱えていた問題は、要素の幅が、定義されたwidth プラスpadding（両側の）と（両側の）で構成されていることborder-widthです。

これを回避するには、対応ブラウザでbox-sizingプロパティ セットを使用します (定義された幅の内側にとborder-boxが含まれます)。したがって、次のようになります。paddingborder-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 フィドルのデモ。

参考文献:

• box-sizing.