要做一个水平 竖直都居中的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的上下边距？
分享到：
相关推荐
9. **水平垂直居中**：无固定宽高的元素居中，可以使用Flexbox布局或CSS Grid，或者利用`display:table-cell`和`vertical-align:middle`。 10. **display属性**：`none`隐藏元素；`inline`内联元素；`block`块级...
- `line-height`: 设置行高，当行高等于高度时可以实现垂直居中。 - `background`: 设置元素背景，包括背景图片的URL和重复方式。 - `color`: 设置文字颜色。 - `font`: 综合设置文字的字体、大小、样式和粗细等。 -...
- 文本对齐：`textAlignment`属性可以用来控制文本的对齐方式，包括左对齐、居中对齐和右对齐。 ### 2. 使用UITextField接受用户文本输入 **问题**: 如何让用户在应用中输入文本信息，例如搜索框、登录表单等。 *...
* Vertical-align: 垂直居中，用于设置元素的垂直居中方式。 * Line-height: 行高，用于设置元素的行高。 * Margin: 外边距，用于设置元素的外边距。 * Padding: 内边距，用于设置元素的内边距。 * Border: 边框，...
增加一根水平线，size为5px，宽度为50%，居中对齐，颜色为红色(red) 7、预格式化 作用：保留源文档中的回车 和 空格 的作用 <pre></pre> 8、分区元素 1、块分区元素 语法：<div></div> 作用：布局 2、行内...