html - 使用 HTML5/CSS3 的 Android 文本框

Question

我想创建这个文本框的布局：

用于电子邮件（或他写电话号码的地方）的那个，使用HTML5and CSS3。

问题是这个文本框的要求：

• 它必须是响应式的（宽度：100%）
• 我不想悬停任何东西（不需要底部边框变成蓝色）
• 我不想使用 JavaScript

有什么建议么？我尝试了几种方法，但我总是遇到问题。

Answer 1

您遇到的问题是元素的宽度由定义的加上width （padding两边的）和border-width（两边的）组成。

为了解决这个问题，在兼容的浏览器中，使用box-sizing属性设置为border-box（包括定义宽度内padding的and ），因此：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 小提琴演示。

参考：

• box-sizing.