css文本变有圆角的输入框

最新推荐文章于 2024-04-12 22:35:54 发布

nailsea

最新推荐文章于 2024-04-12 22:35:54 发布

阅读量1.2k

点赞数 1

分类专栏：前端css 文章标签： css ie jquery ViewUI

本文链接：https://blog.csdn.net/nailsea/article/details/84356095

版权

前端css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

光标在文本上时文本变为输入框，圆角+阴影效果，按照网上的例子，对文本加上
.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 作为块级元素显示