功能要求:
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>

  

[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. 【JavaScript】--重点解析之跨域请求

    JSON JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. JSON是用字符串来表示Javascript对象,例如可以在django中发送一个JSON格式 ...

  2. 模拟搭建Web项目的真实运行环境(六)

    今天把Redis和Mongodb的操作整理一下,方便日后自己查看,废话不多说,直接进入主题. 一.Redis 1. 引用StackExchange.Redis.dll 由于ServiceStack.R ...

  3. mvc file控件无刷新异步上传操作

    前言 上传文件应该是很常见必不可少的一个操作,网上也有很多提供的上传控件.今天遇到一个问题:input控件file无法进行异步无刷新上传.真真的感到别扭.所以就尝试这去处理了一下.主要分三个部分:上传 ...

  4. wpf——三维学习1

    以下xmal是我从msdn上复制下来的.是用于在wpf中创建3d模型的实例链接https://msdn.microsoft.com/zh-cn/library/ms747437.aspx看它的使用方式 ...

  5. [笔记]linux下环境变量配置字段

    一般修改/etc/profile文件 java: export JAVA_HOME=/usr/lib/java/jdk1.8.0_92export CLASSPATH=.:$JAVA_HOME/lib ...

  6. .NET 需要处理的高性能WEB架构 - .NET架构

    1.如果不想被微软包围(其实微软的一套并不贵,是被谣言传高了),数据层依然可以选择SQL Server数据库和存储过程. 2.缓存不再依赖.net自身提供的缓存机制,迁移到部署在Linux平台上的分布 ...

  7. 更改pip安装源的镜像解决安装总是timeout的情况

    由于国外的pip源总是由于各种原因不能被访问或者网速过慢,而造成的timeout错误 解决方法是修改pip的配置文件(如果没有配置文件在相应的地方新建,配置文件的路径和名字参考这里),设置安装包时候访 ...

  8. TotoiseSVN的基本使用方法

    TotoiseSVN的基本使用方法 在 项目管理实践教程一.工欲善其事,必先利其器[Basic Tools]中,我已经讲解了怎样安装TortoiseSVN.在上面的讲解中已经讲了怎么使用VisualS ...

  9. 【vuejs小项目——vuejs2.0版本】组件化的开发方式

    对于多张页面需要里存在相同模块,可以进行组建化的开发模式. 例如:此处需要一个评分标准组件,创建一个components/star/star.vue. 在需要引入该组建的页面上 import进去< ...

  10. SVN

    你先在本地把包删了,然后提交上级目录就可以了.比如你要删除com.aaa.A这个类.你就把A删了,然后提交aaa就行,如果你要把aaa包删了,你就删了以后提交com这个包.SVN就删掉了 svn提交更 ...