CSS：圆形文本输入字段

如何使用css创建圆形文本输入字段

感谢CSS3：

 /* css 3 */
 border-radius:5px;
 /* mozilla */
 -moz-border-radius:5px;
 /* webkit */
 -webkit-border-radius:5px;

---

在现代css3浏览器中试试这样的方法：

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

---

在旧版本中，您需要使用类似JS的jquery插件或

也许您可以从输入字段中删除大纲，然后使用jquery将它们放在一个曲线框中…

这两个答案都是正确的，您可以使用CSS3样式（当前IEs不真正支持），也可以使用javascript包，例如

然而，还有另一种选择，即使它并不理想，也不应该放弃。如果你的输入是固定长度的，你也可以把你想要的任何背景（包括边框）画成一幅图像，然后使用它

background: transparent url(pathToYourImage.png);
border: none;

---

这样做的好处是可以在您能想到的几乎所有浏览器上工作。

^。 然而，一些浏览器添加了一个大纲！铬、狩猎等

---

我知道您可以使用outline:0在chrome中关闭大纲，但我找不到可以在Safari中关闭大纲的地方。穿上它会很难看的

使用

边框半径

根据您的布局使用像素。

您好，您建议的插件很酷，我将其用于div。但是，我担心它不适用于文本输入字段。。。有什么提示吗？只要把你的输入包在一个div中就行了？你是说取整的div放在输入后面吗？在这种情况下，只需使输入透明（参见我前面的示例，只需省略url（）部分）。如果它是其他东西，一个指向演示的链接就好了。

border radius:2px虽然下面的几个答案有效，但使用CSS3的答案可能是当今web标准中更强的解决方案。现在大多数浏览器都支持CSS3。