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

html-css09

网页制作:如何使文本框获得焦点时,只呈现光标闪烁而文本框四周不变化,第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>

做闪光字可以用js代码来实现,纯css代码是很难实现的。JavaScript代码如下:

<div id="abc">这里是闪光的字</div>

<script>

var i=0

function shine(id){

var obj= document.getElementById(id)

if(i==0){obj.style.color="#000"i=1}else{obj.style.color="red"i=0}

}

setInterval("shine('abc')",100)

</script>