养生 装修 购物 美食 感冒 便秘 营销 加盟 小吃 火锅 管理 创业 搭配 减肥 培训 旅游

如何实现div模拟input标签

时间:2024-11-03 01:33:23

在html里面如何实现div模拟一个input标签

工具/原料

sublime

html,css

方法/步骤

1、浏览器能够支持什么样的属性,完全是由浏览器的内核来决定的,在chrmoe,IE,firefo垓矗梅吒x等主流浏览器里面,有contenteditabl髫潋啜缅e这样一个属性,这个属性就可以标记为可输入内容。以下是兼容的浏览器。

如何实现div模拟input标签

2、代码:<divcontenteditable="true">我是一个可被编辑的DIV</div>

如何实现div模拟input标签

3、那么如何让这个DIV变得跟一个输入框一样痒滕熘丬呢,这个时候就需要使用到css样式来调整div的显示css代码晗稍噔猷:textarea{height:28px;width:400px;}#textarea{-moz-appearance:textfield-multiline;-webkit-appearance:textarea;border:1pxsolidgray;font:medium-moz-fixed;font:-webkit-small-control;height:28px;overflow:auto;padding:2px;resize:both;width:400px;}input{margin-top:5px;width:400px;}#input{-moz-appearance:textfield;-webkit-appearance:textfield;background-color:white;background-color:-moz-field;border:1pxsoliddarkgray;box-shadow:1px1px1px0lightgrayinset;font:-moz-field;font:-webkit-small-control;margin-top:5px;padding:2px3px;width:398px;}html代码:<textarea>编辑区域1</textarea><divid="textarea"contenteditable>编辑区域1</div><inputvalue="编辑区域2"/><divid="input"contenteditable>编辑区域2</div>

如何实现div模拟input标签

© 一点知识