多行+垂直居中placeholder
要做一个水平竖直都居中的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的上下边距？
相关推荐
drdrsky 2020-06-16
PioneerFan 2020-06-10
HSdiana 2020-03-28
葉無聞 2020-03-23
lyg0 2020-03-07
冰蝶 2020-01-10
玫瑰小妖 2019-12-31
行吟阁 2019-12-08
aiolos 2016-04-15
loverlucky 2016-03-15
WebVincent 2019-07-01
云端漂移 2019-07-01
renpinghao 2019-06-30
kbkiss 2019-06-29