文本域的HTML文本域几种样式

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了文本域的HTML文本域几种样式相关的知识,希望对你有一定的参考价值。

参考技术A

1.没有滚动条的文本域(无边框)
<textarea style=border: 0; overflow: auto; color: #FFFFFF; background-image: url(http://expert.csdn.net/images/csdn.gif)></textarea>
2.红色边框的文本域
<textarea style=border: #FF0000 1px solid; overflow: visible; color: #FFFFFF; background-image: url(http://expert.csdn.net/images/csdn.gif)></textarea>
3.无边框有滚动条
<textarea style=scrollbar-face-color:#ff80ff;border:0px;background-image:url(http://expert.csdn.net/images/ad/dby3_database_120.GIF);color:#ffffff;font-size:15pt;font-weight:bold>
雨中人<br>雨中人<br>雨中人<br>雨中人<br>雨中人<br>雨中人 <br>雨中人<br>雨中人<br>雨中人<br>雨中人<br>雨中人< br>雨中人<br>雨中人<br>雨中人<br>雨中人<br>雨中人<br>雨中人<br>雨中人<br>
</textarea>
4.比较好看的一个
<input name=email type=text id=email style=height:19;border-top: 1px solid #808080;border-right: 1px solid #D4D0C8;border-bottom: 1px solid #D4D0C8;border-left: 1px solid #808080; value= size=29>
<br>
<textarea name=content cols=36 rows=8 id=content style=border: 1 solid #888888;LINE-HEIGHT:18px;padding: 3px;></textarea>
<textarea style=border: #FF0000 1px solid; overflow: visible; color: #FFFFFF; background-image: url(http://expert.csdn.net/images/csdn.gif)></textarea>
其它:
<textarea style=border: 0; overflow: auto; color: #FFFFFF; background-image: url(http://expert.csdn.net/images/csdn.gif)></textarea>
1、设置文本域的字体
<TEXTAREA STYLE=font-size:9pt;font-family:verdana;color:#333333>输入内容</textarea>
2、设置文本域的背景色
<TEXTAREA STYLE=background-color:#ffffff>输入内容</textarea>
3、文本域的虚线边框设置
<TEXTAREA STYLE=border:1px dotted #6CABE7;>输入内容</textarea>
4、文本域的实线边框设置
<TEXTAREA STYLE=border:1px solid #6CABE7;>输入内容</textarea>
5、文本域的点线边框设置
<TEXTAREA STYLE=border:2px dotted #6CABE7;>输入内容</textarea>
6、 设置文本域的背景图
<TEXTAREA STYLE=background-attachment: fixed; background-image: url(背景图所处位置)></textarea>

JS调用CSS样式表问题(功能鼠标经过文本域是文本域边框颜色发生变化『给出能够实现功能的源码』)

JS调用CSS样式表问题(功能鼠标经过文本域是文本域边框颜色发生变化『给出能够实现功能的源码』)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题文档</title>
<script type="text/javascript">
function dod()
document.getElementById("testId").className="testClass"
</script>
<style type="text/css">
.testClass border:5px solid #000;
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

</head>

<body>
<div >
<input name="" type="text" onmouseover="dod"/>
</div>

<div id="testId">
abc
</div>
</body>
</html>

参考技术A 用CSS:
input:hover border: 5px solid #000;

用Javascript:
<input name="" type="text" onmouseover="this.style.border = '5px solid #000';" onmouseout="this.removeAttribute('style');" />追问

这样还要定义javascript呀! 没看见有捱。

追答


把这一行改为

本回答被提问者采纳
参考技术B <input type="text" size="10" id="text1" class="text1" onmouseover="javascript:textover('tover');" />
<style type="text/css">
.text1
background:#fff;
border:solid 1px #ccc;

.tover
background:#fff;
border:solid 1px #f00;

</style>
楼上的这么改下就行了。要注意CSS的优先权
参考技术C <input type="text" size="10" id="text1" onmouseover="javascript:textover('tover');" />
<style type="text/css">
#text1
background:#fff;
border:solid 1px #ccc;



.tover
background:#fff;
border:solid 1px #f00;


</style>
<script language="javascript">
function textover(cname)
var m
m=document.getElementById("text1")
m.classname=cname


</script>追问

你用这个实现了“鼠标经过文本域是文本域边框颜色发生变化”?

追答

这个没问题,测试过了

.tover
border:#FF0000 solid 1px;
display:block;



function fun(test)

var object= document.getElementById(test);
object.setAttribute("className","tover");



参考技术D 建议你用jquery,,实现你的要求很简单的。。。追问

a:hover可以实现,不过在IE8.0下出现了兼容性问题,郁闷呀!

追答

为什么一定要用a:hover呢,你不会变个方法来实现,程序是死的认识活的,活人还能让尿憋死啊!!要学会变通@

追问

那你能够解决这个问题不? 能解决请写出源码

追答

首先引入jquery文件。。。

$(function()
$("#mouse").mouseover(function()$(this).addClass("sss"));
$("#mouse").mouseout(function()$(this).removeClass("sss"));
);

以上是关于文本域的HTML文本域几种样式的主要内容,如果未能解决你的问题,请参考以下文章

怎么设置HTML文本域的宽高度

php 文本域

在winform中怎么样设置文本域根据文本域中显示的内容自动改变大小

Html-文本域

Html-文本域

Html-文本域