网页制作：如何使文本框获得焦点时，只呈现光标闪烁而文本框四周不变化

html-css011

网页制作：如何使文本框获得焦点时，只呈现光标闪烁而文本框四周不变化,第1张

分析问题：

文本框获取焦点时，浏览器给采用默认的处理方式，为其加上高亮外边框。

解决思路：

我们可能通过，在input获取焦点时，采用css将文本框的外边框去掉。为文本框添加如下样式即可。

outline:none

样式代码：

input:focus {outline:none}

下面给出一个完成的示例代码：

<html>

<head>

<style>

form{background-color : #FF00F1Fheight:50pxpadding : 15px}

.inputStyle, .inputStyle:focus {outline:none}

</style>

</head>

<body>

<div id="dh2">

<form>

<input type="text"  class="inputStyle"/>

<input type="text" />

</form>

</div>

</body>

</html>

具体实现代码如下：

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

}