css 文本框聚焦时如何控制无边框

html-css014

css 文本框聚焦时如何控制无边框,第1张

具体实现代码如下：

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得到焦点时的边框状态

}

这是浏览器的默认行为，当输入框聚焦时，outline属性的样式效果就出来了，360浏览器默认的outline属性样式为蓝色，所以出现的是蓝色的边框。想要去掉蓝色边框的话，可以设置outline：none或者outline：0都可以。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<style type="text/css">

.t{

transition: all 0.30s ease-in-out

border: 1px solid #ddd

}

.t:focus{

border: 1px solid #66AACC

box-shadow: 0 0 5px #66AACC

outline: none

}

</style>

<body>

<input class="t" type="text">

</body>

</html>

大概这样 具体自己改下