多行+垂直居中placeholder

别告诉我有Bug 2012-12-10

要做一个水平竖直都居中的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的上下边距?

相关推荐