点击文本框后边框变成蓝色怎么实现的？-慕课网

首页课程实战体系课手记专栏慕课教程

点击文本框后边框变成蓝色怎么实现的？

来源：6-8 文本框内容改变事件（onchange）

不蒸馒头丶蒸口气3307663

2016-09-05 15:04

点击文本框后边框变成蓝色怎么实现的？

写回答关注

7回答

山姆森

2016-09-05 16:14:11

已采纳

通过css对文本框的样式进行设置。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>text</title>
<style type="text/css">
#textarea{
border: 2px solid blue;
}
p{
border: 2px solid green;
padding: 10px;
}
</style>
</head>
<body>
<textarea name="textarea" id="textarea" cols="30" rows="10">这是使用css控制文本输入框的样式</textarea>
<p>当然也可以用css控制段落、文本的样式，使其拥有一个边框。</p>
</body>
</html>

1 0

不蒸馒头丶蒸...

非常感谢！javascript:void(0)

2016-10-27 17:01:41

共 1 条回复 >
慕粉4375880

2016-11-16 16:28:33

来回答一个题外话
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 文本框内容改变事件 </title>
<script type="text/javascript">
function message(){
var dd=document.getElementsByName("summary")[0];
dd.style.border="2px solid blue";
}
function outMessage() {
var dd=document.getElementsByName("summary")[0];
dd.removeAttribute('style');
}
</script>
</head>
<body>
<form>
个人简介：<br>
<textarea name="summary" cols="60" rows="5" onfocus="message()" onblur="outMessage()">请写入个人简介，不少于200字！</textarea>
</form>
</body>
</html>

0 1
桃太郎

2016-10-10 22:36:19

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 文本框内容改变事件 </title>
<script type="text/javascript">
function message(){
var dd=document.getElementsByName("summary")[0];
dd.style.border="2px solid blue";
}
</script>
</head>
<body>
<form>
个人简介：<br>
<textarea name="summary" cols="60" rows="5" onchange="message()">请写入个人简介，不少于200字！</textarea>
</form>
</body>
</html>

0 0
慕村1994845

2016-09-10 10:08:15

textarea文本框应该有个内置边框色，而且看起来应该就是蓝色；当你设置其他边框色，点击textarea文本框；会在原本的颜色上叠加蓝色
上图是没有点击textarea文本框之前设置的粉色；下图点击文本框后，在原本的粉色上叠加了蓝色，而且边框粗细应该是1px，我设置的粉色是3px，

0 1
慕村1994845

2016-09-10 09:57:59

什么都不设置，点击文本框不也是边框变蓝色呢？

1 0

Sheryl...

这是浏览器默认给文本框添加的样式就像按钮的形状一样不一样的浏览器定义的属性不同按钮的样式也不一样

2016-10-26 11:12:09

共 1 条回复 >
榴莲0

2016-09-05 17:15:57

onclick=message();

0 0
子不语怪力乱神

2016-09-05 15:24:08

css?

0 0