Question

我有一个HTML5输入字段，当字段中包含字符时，在webkit浏览器中显示一个带有“x”的清除按钮。问题是，当字段填充字符时，它们将在x按钮后面运行，直到它们从输入的左侧滚动到达输入的右侧之前。

我想定义可能出现字符的输入区域的宽度。如何以最跨浏览的方式完成这项工作？（我不需要所有浏览器中的x按钮，但是当它们出现时我不介意它们。我只需要定义输入可用于可见字符的区域，这样它们就会开始向左滚动他们落后于x按钮）

Answer 1

简单！

只需“隐藏”输入并使用div模拟一个输入。所以你在用户不能写的右边有一点空间;）

<div class="input_container"><input type="TEXT" /></div>

input {
background-color: white;
border: 0px;
width: 180px;
outline: 0px;
}
.input_container {
width: 200px;
border: 1px solid #000;
}

Answer 2

使用padding-right CSS属性

<input type="text" style="padding-right: 1em; width: 5em;">

Answer 3

如果你在讨论search inputs（我认为只有那些在WebKit浏览器中显示小x的那些），我建议删除导致更多的自定义样式麻烦比什么都重要：

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    display: none;
}

在html5输入字段中控制文本溢出

3 个答案: