css 文本框聚焦时如何控制无边框
发布网友
共5个回答
热心网友
具体实现代码如下：
var inputO = document.getElementById("input1");
inputO.onblur = function()
{
inputO.style.border = "1px solid rgb(0, 0, 0)";//input失去焦点时的边框状态
}
inputO.onfocus = function()
{
inputO.style.border = 0; //input得到焦点时的边框状态
}
热心网友
<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>文本框得到焦点去边框</title>
<link rel="stylesheet" href="inputOnblur.css">
</head>
<body>
<input type="text" id="input1">
<script src="inputOnfocus.js"></script>
</body>
</html>
inputOnfocus.js 文件代码清单如下：
inputO.onblur = function()
{
inputO.style.border = "1px solid rgb(0, 0, 0)";//input失去焦点时的边框状态
}
inputO.onfocus = function()
{
inputO.style.border = 0; //input得到焦点时的边框状态
}
热心网友
我习惯用jquery用这段代码试试。
//获得焦点时的边框样式
$("#inputID").focus(function(){ $(this).css("border",0);});
//失去焦点时的边框样式
$("#inputID").blur(function(){ $(this).css("border","1px solid red");});
希望能帮到你！
热心网友
<style type="text/css">
input {
outline:none;
}
</style>
热心网友
outline:none;
