html - 控制 html5 输入字段中的文本溢出

Question

我有一个 HTML5 输入字段，当该字段中有字符时，它在 webkit 浏览器中显示一个带有“x”的清除按钮。问题是，当该字段充满字符时，这些字符将在 x 按钮后面运行，直到它们到达输入的右侧，然后才滚动离开输入的左侧。

我想定义字符可能出现的输入区域的宽度。这是如何以尽可能跨浏览器的方式完成的？（我不需要所有浏览器中的 x 按钮，但是当它们出现时我不介意它们。我只需要定义输入对可见字符可用的区域，以便它们开始向左滚动之前他们躲在 x 按钮后面）

Answer 1

这很简单！

http://jsfiddle.net/neRWQ/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

如果您正在谈论搜索输入（这是我能想到的唯一x在 WebKit 浏览器中显示较小的搜索输入），我建议您删除导致比其他任何东西都更麻烦的自定义样式：

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