点击文本框后边框变成蓝色怎么实现的?
点击文本框后边框变成蓝色怎么实现的?
2016-09-05
通过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>
来回答一个题外话
<!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>
<!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>
举报