css 圆角输入框

prothi

浏览: 60112 次
性别:
来自: 北京

最近访客更多访客>>

tly_123

a1012827688

daizhi0626

yjflfliulei

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

CSS webkit IE Chrome Safari

前一段时间，项目主要集中于前端页面的开发，对于Css样式也学习了很多，其中有一项就是制作一个圆角输入框：

对应的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
		<style type="text/css">
			input {
				border:0px;
				background-image:url(images/long-input.png);
				background-repeat:no-repeat;
				background-position-x:right;
				padding-left:3px;
				padding-right:3px;
				height:18px;
				font-size:11px;
				width:70px;
			}
		</style>
    </head>
    <body>
        <form>
            <input value="Hellokitty"/>
        </form>
    </body>
</html>

实现思路如下：

1.使用border:0px;去掉input框默认的边框

2.制作一个圆角的输入框，并设定为input的背景图片并且设定background-repeat:no-repeat;以不让背景图片重复

3.由于是使用固定的背景制作圆角，因此需要设定固定的height:18px;font-size:11px;font-size:11px;

此时的效果图：

4.发现输入框中的内容压在了左边的背景图片上，因此使用padding-left:3px;使内容有一定的左边距padding-right:3px;同理

此时基本完成整个制作，但在IE下输入字符多的情况下出现:

也就是说当输入文字过多的时候，背景图片随着左移了，此时设置一个关键字属性background-position-x:right;就可已完成预期的效果了

总结：

使用背景图片制作圆角框实现机理简单，但是灵活性不大，因此对于那些需要改变宽高的圆角输入框来说只能制作多张图片，灵活性较差，但是对于不需要改变宽高，大小一致的圆角输入框来说，是一种简单有效的方式。大家也可以分享一下其他的实现方式，比较一下~

查看图片附件

分享到：

zoj 1002 FireNet

2009-12-21 10:00
浏览 9520
评论(7)
论坛回复 / 浏览 (7 / 16288)
分类:Web前端
查看更多

7 楼 ChenA 2010-02-03

可以用border-image + background-color实现，对任意大小的都可以用。
效果如下:

不过背景色填充的时候我不知道怎么填充的。
具体请看:http://www.iteye.com/problems/35557

6 楼 baozi265 2009-12-24

感觉还是比较好实现的吧，有很多方法啊。

5 楼 high_java 2009-12-23

为什么要圆角框呢？是国内的项目吗？客户要求的吗？

4 楼半人马 2009-12-23

还有比这更吃饱了撑的事吗？

3 楼 hyj1254 2009-12-23

引用

实际应用中是不是应该由几张背景图去实现会好一点？譬如有圆角的背景图，和直线的背景图

确实应该如此，这样更灵活，适用的场景更广泛。但一个最现实的问题是，背景图片该如何制作？或者说是不是还要另外再去掌握一种图片制作的技能？感觉这不是个简单的问题。

2 楼 bizhi.xiao 2009-12-23

ff,chrome,safari下面可以用圆角边框来实现，IE下面还是用背景比较好

input {  
                height:18px;  
		inline-height:18px;
                font-size:11px;  
                width:70px; 
		text-align:center;
		border:#ccc 1px solid;
		border-radius: 5px; /* css 3标准 */
  		-moz-border-radius: 5px;  /* mozilla */
  		-webkit-border-radius: 5px;  /* webkit */
 }

1 楼 hommy8 2009-12-23

实际应用中真的会这样去实现吗（提供一个定长的背景图）？就这个输入框的长度问题已经是一个很致命的地方。实际应用中是不是应该由几张背景图去实现会好一点？譬如有圆角的背景图，和直线的背景图

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论