光标在文本上时文本变为输入框，圆角+阴影效果，按照网上的例子，对文本加上
.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 作为块级元素显示
分享到：
相关推荐
1. **边框动画效果**：通过CSS3的`border-radius`属性，可以创建圆角输入框，增强视觉舒适度。同时，利用`transition`和`animation`属性可以实现边框颜色的渐变或动态变化，增加表单的动态感。 2. **背景渐变**：...
一种简单直接的方法是通过CSS清除文本输入框和文本区域的默认轮廓样式（outline）。可以使用以下CSS规则： ```css input:focus { outline: none; } textarea:focus { outline: none; } ``` 这种方法的优点在于...
11. **圆角边框**：`border-radius`属性可以创建圆角输入框，提供更柔和的视觉体验，同时也可以结合过渡效果创建动态的边框形状变化。 12. **输入框内图标**：利用`::before`和`::after`伪元素，可以添加图标作为...
为了创建带有提示文字的输入框，我们可以使用`placeholder`属性。这个属性允许我们在输入框内设置一段淡色的文本，当用户聚焦或输入内容时，这段文本会自动消失。以下是一个简单的HTML代码示例： ```html <!DOCTYPE...
CSS3的边框过渡可以创建圆角输入框，让输入框看起来更加柔和。例如，使用`border-radius`属性设置输入框的四个角的半径： ```css input { border-radius: 5px; } ``` 盒阴影`box-shadow`则可以增加深度感，...
4. **圆角边框**：`border-radius`属性可以让input框的边角变得圆润，符合现代设计趋势。 5. **渐变背景**：`background-image`可以设置线性或径向渐变，为input框添加独特的背景效果。 6. **文字效果**：`text-...
6. **自定义提示文字**：使用`placeholder`属性可以为输入框添加提示文本，帮助用户理解输入框的预期内容。配合CSS，我们可以控制提示文字的颜色、位置等，使其在输入框获得焦点后淡出，提供良好的用户引导。 7. **...
在本特效资源中，CSS3被广泛应用于打造输入框的视觉样式，包括设计圆角边框、设置背景颜色、调整边框的宽度和颜色等。尤其值得一提的是，利用CSS3的动画功能，我们实现了输入提示文字的动态效果，如当鼠标悬停或焦点...
在这个特定的项目中，"HTML5+CSS3源码_CSS3实现一款联系表单 输入框带小图标.rar.rar" 提供了一个使用HTML5和CSS3构建的联系表单，该表单设计独特，输入框带有小图标，这增加了用户的交互体验和界面的美观性。...
"漂亮"的文本输入框可能涉及到圆角、阴影效果、自定义占位符颜色、边框动画等高级CSS技术。 3. **特效应用**：标签中提到的"特效"可能指动态效果，如聚焦时的高亮、输入验证时的提示显示、鼠标悬停时的变化等。...
- `placeholder`属性：在HTML5中，`<input>`标签引入了`placeholder`属性，用于在输入框中显示提示文本，当用户开始输入时会自动消失。在IE8中，这个属性默认是不被支持的，因此需要通过JavaScript或者特定的...
在这个例子中，`transition`属性用于指定当`input`元素的`focus`伪类被触发时，哪些CSS属性应该有过渡效果，以及过渡的持续时间和缓动函数。`all`表示所有可动画的属性，`0.3s`是过渡时间，`ease`是缓动函数，使得...
4. **占位符文本（Placeholder Text）**：`placeholder`属性在输入框为空时显示提示文字。通过CSS，我们可以调整占位符的颜色和透明度： ```css ::-webkit-input-placeholder { /* WebKit browsers */ color: #...
在网页设计中，输入框（Input）是用户与网站交互的重要元素之一，它通常用于收集用户的文本信息。本文将深入探讨如何使用HTML、CSS、JavaScript（包括jQuery和H5 API）来创建各种漂亮且炫酷的输入框特效，以提升用户...
2. **圆角**：使用`border-radius`属性可以创建圆角输入框。 ```css input { border-radius: 4px; } ``` 3. **背景颜色和文本颜色**：通过`background-color`和`color`属性改变输入框的背景和文本颜色。 ``...
7. **响应式设计**：CSS3的媒体查询(`media queries`)可以帮助我们根据设备屏幕尺寸调整输入框的大小和位置，确保在不同设备上都有良好的显示效果。 8. **动画库与JavaScript**：虽然主要是CSS3实现，但配合...
3. **文字特效**：CSS允许开发者创造出各种动态的文字效果，如颜色渐变、旋转、缩放、浮动等。例如，可以使用text-shadow和keyframes来创建文本的3D效果或飘动效果，增加页面的视觉吸引力。 4. **水波动画**：这个...