[CSS]textarea设置下划线格式
功能要求:
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设置下划线格式的更多相关文章
- 转:【iOS开发每日小笔记(十一)】iOS8更新留下的“坑” NSAttributedString设置下划线 NSUnderlineStyleAttributeName 属性必须为NSNumber
http://www.bubuko.com/infodetail-382485.html 标签:des class style 代码 html 使用 问题 文件 数据 ...
- Android开发 ---SQLite数据库,lock文件,结果集游标,适配器,安全退出,给连接设置下划线,编辑器,投影,ContentValues存储,DbHelper,activity栈
目录截图: 1.activity_main.xml 主界面效果: <?xml version="1.0" encoding="utf-8"?> &l ...
- 不可思议的纯CSS导航栏下划线跟随效果
先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...
- [Android] TabLayout设置下划线(Indicator)宽度
在使用TabLayout的过程中,为每个标签添加一个 下划线,但发现每个下划线的 宽度 都是一样的,例如会如下显示 这样很难看,所以必须进行调整后的效果如下: 看,这样不是非常和谐啦!~~ 实现方法很 ...
- 纯css导航栏下划线
.nav-underline > *{/* 指定容器,里面可以是li.span等多样化的元素 */ display: inline-block; margin: -3px; padding: 1 ...
- CSS改变字体下划线颜色
下图是网页中一个非常普通的列表. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQXVndXMzMzQ0/font/5a6L5L2T/fontsize/40 ...
- android实现对导航Tab设置下划线选中效果
技术人员核心竞争力还是技术啊.努力提高各种实现效果.加油哦! 直接看效果.此linearLayout只有两个Button ,当选中Button1,Button1有个下划线选中效果.当选中Buton2, ...
- Android中Tablayout设置下划线宽度 和 dp和px之间进行相互转换
开发中遇到了一个问题,Tablayout设置下换线长度,看了点资料,分享给大家. 效果图: 直接贴代码(要在tabLayout添加完所有的tab后调用) public vo ...
- CSS制作hover下划线动画
.demo1{ position: relative; text-decoration: none; font-size: 20px; color: #333; } .demo1:before{ co ...
随机推荐
- PE读写
// 仿PE文件.cpp : Defines the entry point for the console application.// #include "stdafx.h"# ...
- 游戏的套路你知道吗? H5 Canvas刮刮乐
玩游戏的人 很多时候都会遇到翻牌子 开宝箱. 总有人傻傻的在哪里还纠结很久到底点哪一个! 纠结 指不定翻哪一个会多一点,你明明看到那个卡片的奖项多 . 那我就告诉你好了 其实很多时候在你点开那个 ...
- css3 动画的有关属性
transform transform: none|transform-functions; transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜. ...
- Counter Mode ( CTR )
Encryption Decryption
- PHP 版本判断 version_compare() 函数
在度娘中简单的找了下,判断当前PHP的版本是否高于某个版本,或者低于某个版本的方法 显示的结果基本上都是一样的,好吧,要不是我忘记了version_compare()这个函数我才不会去找度娘,果断找以 ...
- Oracle事务
Oracle事务的ACID特性 原子性Atomicity:事务中的所有动作要么都发生,要么都不发生. 一致性Consistency:事务将数据库从一种状态转变为下一种一致状态. 隔离性Isolatio ...
- LWIP总结
介绍 Lwip,light weight IP:是由Adam Dunkels 开发的一个小型开源的TCP/IP协议栈:目前已经为全球共同开发的开源协议:支持TCPIP协议族的核心协议:包括:ARP/I ...
- [leetcode] 题型整理之图论
图论的常见题目有两类,一类是求两点间最短距离,另一类是拓扑排序,两种写起来都很烦. 求最短路径: 127. Word Ladder Given two words (beginWord and end ...
- D3中selection之使用
1. 极为重要的reference: [1] How selections works. http://bost.ocks.org/mike/selection/ [2] Nested selecti ...
- Daily Scrum Meeting 汇总
Alpha Daily Scrum Meeting --FirstDay(11.8) Daily Scrum Meeting --SecondDay(11.9) Daily Scrum Meeting ...