css文本变有圆角的输入框

m47cat · 发表于 2013-2-7 23:59:28

光标在文本上时文本变为输入框，圆角+阴影效果，按照网上的例子，对文本加上
.createFolderBorder{
width:195px;
border: 2px solid #ececec;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
box-shadow: 0 0 3px #333; //边框阴影
-webkit-box-shadow: 8px;
-moz-box-shadow: 8px;
// background: linear-gradient(#ececec, #f1f1f1);//渐变阴影
float: left;
position:relative;//不加这行ie7或者8里面无特效

}
ie7,8圆角不支持。于是改成用背景图片显示圆角,或用
http://wenku.baidu.com/view/ed2c32e3524de518964b7df2.html 写出圆角。
用背景图片：
<!DOCTYPE html><html><head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><meta charset=utf-8 /><title>JS Bin</title><style type="text/css">.createFolderDiv{ float:left; height:21px; width:185px; color: #779576; font-size: 18px; font-family: "Times New Roman";} .createFolderBorder{ width:185px; background: url("createFolderBg.png") no-repeat; float: left; position:relative; } #createFolderSpan{ float:left; width:155px;}#createFolderInput{ display:none; width:150px; padding:0 0 0 5px; border: 0; background: none; font-size: 14px;}#createFolderInput:focus{ outline: none;//chrome}#createFolderBtn { width:23px; margin-right:-10px\9;}#createFolderBtn:hover{ cursor:pointer; }#createFolderMsg{ display:none; background-color:#e6bfbf; width:230px; height: 38px; border: 1px solid 925656; border-radius: 8px; padding-top:5px; float:left;}</style> <script> $().ready(function(){ $("#createFolderBtn").bind("click",function(){ $("#createFolderSpan").css("display","block"); $("#createFolderInput").css("display","none"); $(".createFolderDiv").removeClass("createFolderBorder"); $("#createFolderMsg").css("display","block"); }) $("#createFolderSpan").bind("hover",function(){ $(this).hide(); $("#createFolderInput").show(); $(".createFolderDiv").addClass("createFolderBorder") }) }) </script></head><body> <div class="createFolderDiv"> <span id="createFolderSpan" style="">Create Folder</span> <input style="" id="createFolderInput"/> <span id="createFolderBtn"></span> </div> <span id="createFolderMsg">Please provide a name.</span></body></html>

Q:
1.ie和ffmargin-right不一致，为btn加了margin-right:-10px\9
2.chrome上input焦点时默认有颜色边框，加outline: none去除
3.createFolderBtn按钮如果用图片，高度设置为超出外层Div时，同层的input设置margin-top,padding-top均无效，但width, padding-left,vertical-align:middle有效。求解中。。。

R:
3.对input设置display:block或float:left 作为块级元素显示

		自动登录	找回密码
密码			立即注册