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

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

源代码如下：

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

　　

[CSS]textarea设置下划线格式的更多相关文章

  1. 转：【iOS开发每日小笔记（十一）】iOS8更新留下的“坑” NSAttributedString设置下划线 NSUnderlineStyleAttributeName 属性必须为NSNumber

    http://www.bubuko.com/infodetail-382485.html 标签:des   class   style   代码   html   使用   问题   文件   数据 ...

  2. Android开发 ---SQLite数据库，lock文件，结果集游标，适配器，安全退出，给连接设置下划线，编辑器，投影，ContentValues存储，DbHelper,activity栈

    目录截图: 1.activity_main.xml 主界面效果: <?xml version="1.0" encoding="utf-8"?> &l ...

  3. 不可思议的纯CSS导航栏下划线跟随效果

    先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...

  4. [Android] TabLayout设置下划线(Indicator)宽度

    在使用TabLayout的过程中,为每个标签添加一个 下划线,但发现每个下划线的 宽度 都是一样的,例如会如下显示 这样很难看,所以必须进行调整后的效果如下: 看,这样不是非常和谐啦!~~ 实现方法很 ...

  5. 纯css导航栏下划线

    .nav-underline > *{/* 指定容器,里面可以是li.span等多样化的元素 */ display: inline-block; margin: -3px; padding: 1 ...

  6. CSS改变字体下划线颜色

    下图是网页中一个非常普通的列表. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQXVndXMzMzQ0/font/5a6L5L2T/fontsize/40 ...

  7. android实现对导航Tab设置下划线选中效果

    技术人员核心竞争力还是技术啊.努力提高各种实现效果.加油哦! 直接看效果.此linearLayout只有两个Button ,当选中Button1,Button1有个下划线选中效果.当选中Buton2, ...

  8. Android中Tablayout设置下划线宽度 和 dp和px之间进行相互转换

    开发中遇到了一个问题,Tablayout设置下换线长度,看了点资料,分享给大家. 效果图:               直接贴代码(要在tabLayout添加完所有的tab后调用) public vo ...

  9. CSS制作hover下划线动画

    .demo1{ position: relative; text-decoration: none; font-size: 20px; color: #333; } .demo1:before{ co ...

随机推荐

  1. IE8下导入EXCEL数据传到客户端以附件下载

    IE8下导入EXCEL数据传到客户端以附件下载方式出现,而不显示数据,解决方法:以text/html格式返回. HttpResponseMessage message = new HttpRespon ...

  2. Java异常处理机构（日常笔记）

    try{ 需要保护的代码块 }catch(异常类型 实例){ 捕捉到异常时的代码处理块 }[可有0~多个catch语句] finaly{ 不管异常是否发生都要执行的代码块}

  3. java线程 - 多线程 - 守护线程

    1.多线程执行者/处理类 都是Runnable的实现类(如自定义类实现Runnable 或 java原生的Thread.FutureTask),但最后都必须封装成Thread线程类由Thread.st ...

  4. vi编辑器命令

    Linux下的文本编辑器有很多种,vi 是最常用的,也是各版本Linux的标配.注意,vi 仅仅是一个文本编辑器,可以给字符着色,可以自动补全,但是不像 Windows 下的 word 有排版功能.v ...

  5. Linux中的用户和用户组

      在Linux中,有三种用户: Root 用户:也称为超级用户,对系统拥有完全的控制权限.超级用户可以不受限制的运行任何命令.Root 用户可以看做是系统管理员. 系统用户:系统用户是Linux运行 ...

  6. java求字符串数组交集、并集和差集

    import java.util.HashMap; import java.util.HashSet; import java.util.LinkedList; import java.util.Ma ...

  7. 通过JSch编写上传、下载文件

    package com.hct.util; /** * @作者: HCT * @时间:2016年12月29日下午3:13:20 * @描述: * */ import java.io.*; import ...

  8. ethhdr、ether_header、iphdr、tcphdr、udphdr 结构介绍

    转自:http://blog.csdn.net/petershina/article/details/8573853 ************************eth的结构*********** ...

  9. 模板类 error LNK2019: 无法解析的外部符号

    如果将类模板的声明和实现写在两个独立的文件中,在构建时会出现"error LNK2019: 无法解析的外部符号 "的错误. 解决方法有: 第一种方法,就是把类模板中成员函数的声明和 ...

  10. java中的throw与throws的区别

    什么时运行时异常?什么是非运行时异常? 通俗的讲: 运行时异常:就是编译通过,运行时就崩了,比如数组越界. 非运行时异常:就是编译不通过,这时就得必须去处理了.不然就没法运行了. 全面的讲: Thro ...