[CSS]textarea设置下划线格式

最新推荐文章于 2023-01-11 20:11:22 发布

weixin_30355437

最新推荐文章于 2023-01-11 20:11:22 发布

阅读量1.5k

点赞数

原文链接：http://www.cnblogs.com/cztom/p/6256717.html

版权

功能要求：
1：如何实现在多行文本框textarea里面每一行下面都有一条横线
2：textarea文本框里面有一段不能删掉

实现方法：
横线用背景图片来做，不动的文字用浮动层+给textarea增加text-indent来实现缩进。

源代码如下：

<!DOCTYPE html>
<html lang="zh">
<head>
　　<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
　　<meta charset="utf-8" />
    <title>Textarea设置下划线格式</title>
　　<style type="text/css">
　　.input{position:relative}
　　.word{position:absolute;line-height:20px;left:0px;top:1px;z-index:10;background:#fff}
　　.input textarea{border:none; text-indent:75px;line-height:20px;background:url(http://www.w3dev.cn/eg/linebg.gif) repeat;overflow:auto}
　　</style>
</head>
<body>
　　<div class="input">
　　　　<div class="word">护理措施:</div>
	<textarea class="input" rows="5" cols="50"></textarea>
　　</div>
</body>
</html>

转载于:https://www.cnblogs.com/cztom/p/6256717.html