圆形边框-文本输入css [关闭]小提琴

问题描述 投票:6回答:3

我如何为我的文本类型输入添加圆角边框(因此![在此处输入图像描述http://i.stack.imgur.com/zig2d.png

请告诉我一个解决方案,我该怎么做。谢谢!!我已经尝试过css3 border但它给出了不好的结果,所以请与我分享如何做

以下不注意

更新:JS解决方案:我仍然希望找到一个纯CSS输入法解决方案,但这是我现在要使用的解决方法。请注意,这是直接粘贴到我的应用程序之外的,因此不是一个像上面这样的独立示例。我刚刚将大型Web应用程序中的相关部分包括在内。您应该能够理解。 HTML是带有“ link”类的输入。较大的垂直背景位置是因为它是精灵。在IE6,IE7,IE8,FF2,FF3.5,Opera 9.6,Opera 10,Chrome 2,Safari 4中进行了测试。我仍然需要在某些浏览器中调整背景像素几个像素:

css
3个回答
13
投票

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...">

9
投票

您想查看border-radiussee here以获取更多信息)

border-radius CSS属性允许网络作者定义如何 圆角的边界角是。

Fiddle

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

2
投票

http://jsfiddle.net/eeDAf/

border-radius: 7px;

真的很简单!

© www.soinside.com 2019 - 2024. All rights reserved.