别告诉我有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的上下边距?