圆角边框 - 文本输入 CSS

Question

如何给文本类型的输入框添加圆角边框？

例如：

我已经尝试过CSS3边框，但效果很差。

更新：JS解决方案：我仍希望找到一个纯CSS在输入框上的解决方案，但现在这是我将要使用的解决方法。请注意，这是直接从我的应用程序中粘贴出来的，因此不像上面的漂亮，独立的例子那样。我只包含了我的大型Web应用程序中相关的部分。HTML是具有“link”类的输入框。大的垂直背景位置是因为它是一个精灵。已在IE6、IE7、IE8、FF2、FF3.5、Opera 9.6、Opera 10、Chrome 2和Safari 4中进行了测试。我仍需要在某些浏览器中微调背景位置几个像素。

- user3083487

---

使用 border-radius!! - dardar.moh

Answer 1

input[type=text]{
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
     border-radius: 20px;
     border: 1px solid #2d9fd9;
     color: #a0d18c;
     width: 250px;
     height: 30px;
     padding-left: 10px;
    }
    
input[type=text]:focus {
     outline: none;
     border: 1px solid #a0d18c;
     color: #2d9fd9;
}

<input type="text" placeholder="Enter search text...">

- dardar.moh

Answer 2

你想查看border-radius（在此处查看更多信息）

border-radius CSS属性允许Web作者定义边框角的圆角程度。

Fiddle

input[type=text]{
  border-radius:10px;
}

- SW4

---

点赞。可能是唯一的 CSS 解决方案。在旧版浏览器中，您只会得到常规角落。 10K 派对真好笑 - Ivozor

作为引用问题的补充，CSS规范实际上将它们定义为字母数字字符的可选项：http://www.w3.org/TR/CSS2/selector.html#matching-attrs - SW4

Answer 3

http://jsfiddle.net/eeDAf/

border-radius: 7px;

这真的很简单！

- user2628521