自动调整圆角的输入框？

Question

我创建了一个看起来像下图的文本框，但我希望它像用户输入的那样调整大小： http://jsbin.com/ahaxe

我认为将搜索图像作为背景插入并将其与右边对齐不会有问题，但是我不知道如何在不使用图像的情况下进行圆角处理。

谢谢大家：）

Answer 1

它可行，但它在IE中不起作用 你可以使用CSS样式。 例如： -moz-border-radius：5px; -webkit-border-radius：5px; border-radius：5px;

Answer 2

input {
  -webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android <e;1.6 */
     -moz-border-radius: 12px; /* FF1-3.6 */
          border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
}

Answer 3

首先尝试faraz建议，如果它在IE上不起作用，请尝试使用-ms-前缀添加另一个声明，如下所示：

-ms-border-radius: 12px;

如果STILL不起作用，您可以尝试使用CSS PIE在IE上强制使用css3：http://css3pie.com/

至于调整大小的解决方案，你可能会找到一个比我自己更好的解决方案，但你可以试试这个：

<input onkeyup="if(this.value.length > 10) { this.style.width = this.offsetWidth + 20 + 'px' }" type="text" />

在此代码中，每当用户在框中键入内容时，Javascript将检查输入中的字符数是否大于10.如果是，那么它将增长20px。

请将值更改为您的心脏内容。祝你的项目好运。