返回首页

温馨提示：本站文章标题使用的字体是《微软雅黑》点击下载这个字体.

顶一下

1 次

对文本输入input效果点点改进

来源：本站原创编辑：admin 时间：2009年02月27日浏览：

hover伪类在IE6中得不到很好的支持，因IE6只支持css1，而在css1中hover伪类只能针对a标签来起作用又加IE7不支持CSS2中的:focus,此例子中ie6,ie7,ff对于:hover, :focus 支持性都不一样。

先给input设置无JS条件下需要的样子,即使浏览器在效果不同的情况下也是.虽然他们总是解释不一样的效果，但是我们需要做的是尽量让他们保持一致,不发生更大的变化。..利用JS读取ID对ID节点下设计class的input进行属性更改. 从而达到IE6下鼠标移上去时显示颜色的效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/* Reset style */
* { margin:0; padding:0; word-wrap:break-word; }
body { background:#FFF; color:#333; font:12px/1.6em Helvetica, Arial, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-size:1em; }
a { color:#333; text-decoration:none; }
	a:hover { color:#333; text-decoration:underline; }
ul, li { list-style:none; }
fieldset, img { border:none; }
legend, .a_hide { display:none; }
em, strong, cite, th { font-style:normal; font-weight:normal; }
input, textarea, select, button { font:12px Helvetica, Arial, sans-serif; }
table { border-collapse:collapse; }

/* Other style */
body { padding:0 50px; }
h2 { padding:30px 0 5px 0; font-size:14px;}

/* Input_tx style */
.input_tx { padding:2px; border:1px solid #DDD; background:#FFF; }
	.input_tx:hover, .input_tx:focus { border:1px solid #444; background:#DDD; }

/* Input_zone style */
.input_ocurrent { padding:2px; border:1px solid #DDD; background:#FFF; }
	.input_ocurrent:hover, .input_ocurrent:focus {  border:1px solid #444; background:#DDD; }
.input_current { padding:2px; border:1px solid #444; background:#DDD;  }
</style>

<body>
<h2>文本输入框input</h2>
<div>
<form action="" method="post">
<input class="input_tx" name="keyword" type="text" size="30"/>
		</form>
</div>
<h2>利用JS解决方案</h2>
<div id="input_zone">
<form action="" method="post">
<input class="input_ocurrent" name="keyword" type="text" size="30"/>
<input class="input_ocurrent" name="keyword" type="text" size="30"/>
		</form>
</div>

</body>
</html>
本代码由<a href="http://www.web265.com" target="_blank">站长素材网(http://www.web265.com)</a>整理发布

运行代码
复制代码
另存代码
收藏本页

提示：您可以先修改部分代码再运行，复制代码和保存代码功能在Firefox下无效。

上一篇：支持区号输入的省市二级联动下拉菜单(12K)

下一篇：链接提示,类似QQ空间的复制效果

赞助商友情链接

站长常用工具

更多

返回首页

对文本输入input效果点点改进

赞助商友情链接

站长常用工具

相关文章