急!HTML中设置表单--文字字段,那么编辑文本框的时候如何更改文本框的颜色

这个是文本框<inputtype="text">我希望编辑他的时候,文本框变成这样:该如何实现?你可能理解错了我的意思。我是指,不编辑的时候,是第一幅图片的,当我编辑他的... 这个是文本框<input type="text">
我希望编辑他的时候,文本框变成这样:

该如何实现?
你可能理解错了我的意思。
我是指,不编辑的时候,是第一幅图片的,当我编辑他的时候,也就是点击鼠标进去写字的时候,变成第二种。
然后,编辑完毕,又回到第一种样式
展开
 我来答
xuebaotuxi
推荐于2018-03-23 · TA获得超过1.2万个赞
知道大有可为答主
回答量:4196
采纳率:85%
帮助的人:1047万
展开全部

设置一下文本框的border属性

<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
#txt1
{
border:3px dashed #abcdef;
}
</style>
</head>
<body>
<input type="text" name="" id="txt1"/>
</body>
</html>
追问
你可能理解错了我的意思。
我是指,不编辑的时候,是第一幅图片的,当我编辑他的时候,也就是点击鼠标进去写字的时候,变成第二种。
然后,编辑完毕,又回到第一种样式
追答

那也好办,要用javascript来实现

<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
      #txt1
      {
       border-width:2px;
       border-color: #000;
      }
</style>
<script>
window.onload=function()
{
var oTxt1=document.getElementById('txt1');
oTxt1.onfocus=function()
{
this.style["borderStyle"]="dashed";
}
oTxt1.onblur=function()
{
this.style["borderStyle"]="solid";
}
}
</script>
</head>
<body>
<input type="text" name="" id="txt1"/>
</body>
</html>
百度网友e3ce692
2014-08-26 · TA获得超过156个赞
知道小有建树答主
回答量:215
采纳率:100%
帮助的人:191万
展开全部
定义两个css样式

.csstest1{} 在不编辑的时候显示的样式
.csstest2{} 在编辑的时候显示的样式
定义两个javascript函数
function addcss(thisObj){
thisObj.className="csstest2" ;
};
function deletecss(thisObj){
thisObj.className="csstest1" ;
}
然后给你的input加获得失去焦点的函数
如 <input type="text" name="" id="" onFocus=“addcss(this)” onBlur="deletecss(this)" class="csstest1"/>

思路就是你定义好两种要显示的样式,在input获得失去焦点时用js控制改变显示样式
本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
侯觅荷0Hy853
2014-08-26 · 超过12用户采纳过TA的回答
知道答主
回答量:74
采纳率:0%
帮助的人:23.1万
展开全部
这个得麻烦一些了,要考虑未编辑时和编辑时的两种情况,添加行为,控制border属性。
追问
是啊,该怎么而实现~啊
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
匿名用户
2014-08-26
展开全部
你要的是聚焦输入的时候是一种样式;

失去焦点(光标不在输入框的时候还原)。

大概思路就是
定义俩个类名
.inputFocus {border:1px dashed red;}
.inputBlur {border:0;}
然后再input中添加事件。onfocus="this.className='inputFocus'" onblur="this.className='inputBlur'" class=""

大概就那样的,跟onfocus ,onblur两个事件有关,上面的代码我没有测试。你试试看吧。。。不行再回我。。。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
chh198938
2014-08-26 · TA获得超过128个赞
知道答主
回答量:77
采纳率:0%
帮助的人:50.7万
展开全部
直接 给input加边框 border:1px dashed red; 颜色 大小你可以改成自己想要的
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式