纯div+css模拟实现input以及pleacehold的效果

首先是dom结构:

这里contenteditable=“true”,让文本处于可编辑状态。

然后定义input,不不不!是div的样式。

最后关键的一点,使用伪类以及伪元素实现pleasehold的出现和消失。

.box_border div:empty:before{
	content: attr(placeholder);
	color:#40;
	font-size: 25px;
}
.box_border div:focus:before{
	content:none;
}

向后台提交数据的话,就必须要用的js了,为button添加事件处理函数,获取两个div里的值。呸!获取两个div里的文本内容,通过ajax向后台提交就可以了。

如图:纯div+css模拟实现input以及pleacehold的效果_第1张图片欢迎交流!

你可能感兴趣的:(纯div+css模拟实现input以及pleacehold的效果)