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

html-css020

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

left:100px去掉就好了,可以用float之类的做,然后width里面加一点宽度,float:left 或者right一般就能定位了。

用类似mouseover 的也能做。类似下面这种,希望对你有启发。

<a href="#" target="_blank" title="">

    <img src="1.jpg"

         onmouseover="this.src='2.jpg'"

         onmouseout="this.src='3.jpg'">

    </img>

</a>