多行+垂直居中placeholder

最新推荐文章于 2024-05-08 10:24:37 发布

nailsea

最新推荐文章于 2024-05-08 10:24:37 发布

阅读量320

点赞数

分类专栏：前端css 文章标签： html UI JavaScript css ViewUI

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

版权

前端css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

要做一个水平竖直都居中的placeholder，并且过长时有自动换行
1.把外层container的display设为table，里层设为table-cell，并对里层设置vertical-align:middle实现垂直居中。
2.padding和border：
实际所占宽度=width+padding+margin+border
3.border本来设置在外层，但input获取焦点后重设border时不方便。。。于是设到里层
4.对手机去除自带样式可用appearance:none; -webkit-appearance:none;


<!DOCTYPE html><html>
<head><meta charset=utf-8 />
<title>多行+垂直居中placeholder</title>
<style type="text/css">
.container{ 
  display:table;
  text-align: center;
  font-size: 12px;
  padding:4px 0 4px 0;
}
.container * { 
  height:40px;
  width:100px;
  display: table-cell;
  vertical-align: middle;
}
.placeholderDiv{
  color: #6D6D6D;
  letter-spacing: 2px;
  white-space: pre-wrap;
  margin: 0 5px 0 5px;
}
.emailInput{
  display: none;
  border:solid 1px #E0DEDE;;
  text-indent:10px;
}
.borderRdaius { 
  border-radius: 5px;
  box-shadow:0 1px 10px rgba(0,0,0,0.1) inset;
  border:1px solid #E0DEDE;
}
.emailInput:focus{ 
  box-shadow:0 0 4px rgba(255,153,164,0.8);
  border:solid 1px #B00000;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
  $().ready(function(){
    $(".placeholderDiv").click(function(){
      $(this).hide();
      $(".emailInput").show();
      $(".emailInput").focus();
    })
    $(".emailInput").blur(function(){
      if($(this).val() == ""){
        $(".emailInput").hide();
        $(".placeholderDiv").show();
      }
    })
  })
</script>
</head>
<body>
  <div class="container">
    <div class="placeholderDiv borderRdaius">请输入您的电子邮箱</div>
    <input class="emailInput borderRdaius"/>
  </div>
</body>
</html>
</html>

tbd
input获取焦点后多出了1px的上下边距？

nailsea

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
多行+垂直居中placeholder

要做一个水平竖直都居中的placeholder，并且过长时有自动换行1.把外层container的display设为table，里层设为table-cell，并对里层设置vertical-align:middle实现垂直居中。2.padding和border：实际所占宽度=width+padding+margin+border3.border本来设置在外层，但input获取焦点后...
复制链接

扫一扫

专栏目录