`
prothi
  • 浏览: 61017 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

css 圆角 输入框

    博客分类：
  • css
CSSwebkitIEChromeSafari 
阅读更多

前一段时间，项目主要集中于前端页面的开发，对于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;就可已完成预期的效果了

 

总结：

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

 

  • 大小: 2.9 KB
  • 大小: 781 Bytes
  • 大小: 816 Bytes
  • 大小: 869 Bytes
分享到：
zoj 1002 FireNet
评论
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  
实际应用中真的会这样去实现吗（提供一个定长的背景图）？ 就这个输入框的长度问题已经是一个很致命的地方。实际应用中是不是应该由几张背景图去实现会好一点？譬如有圆角的背景图，和直线的背景图
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics