css 多行输入带下划线设置

最新推荐文章于 2024-06-05 19:20:06 发布

bruce60

最新推荐文章于 2024-06-05 19:20:06 发布

阅读量2.4k

点赞数 2

文章标签： css html html5 vue.js

本文链接：https://blog.csdn.net/bruce60/article/details/107713620

版权

有需求要求填写地址的时候，输入栏有多行输入框下划线，这个整晕我，input的写，整了半天只有一行下划线，还不能连贯，只能考虑用textarea来实现，不说多了上效果图

再来一段代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
	</head>

	<style>
		body,div{
        font-family: 'Courier New', Courier, monospace;
        font-size: 12px;
    }
		.input{
		position:relative;
		}
	     .title{
		position:absolute;
		line-height:20px;
		left:62px;
		top:1px;
		z-index:10;
		background:#fff;
		}
      .input  .inputarea{
		 border:none;
		 text-indent:75px;
		 line-height:20px;
		 background:url(http://www.w3dev.cn/eg/linebg.gif) repeat;
		resize:none;
		 }
   

</style>

	<body>
		　<div class="input">
		　　　 　<div class="title">地址:</div>
			   <textarea class="inputarea" rows="5" cols="50"></textarea>
		　　</div>
	</body>
</html>