IE6/7下多种方法移除button、input 默认边框和去掉焦点线

前端技术 2023/09/05 CSS
一、去掉边框：

看看基本的HTML：

复制代码
代码如下:

<div class=\"wrap\">
<input type=\"text\" class=\"input_txt\">
<input type=\"submit\" value=\"submit\" class=\"input_btn\">
<input type=\"button\" value=\"提交\" class=\"input_btn\">
<div>


通常解决这样的bug最好的方法就是在button和input的标签外添加一个标签，然后将样式写在这个标签上，并且把button和input的默认样式都去除掉。

实现方式一：设置CSS：

复制代码
代码如下:

<style type=\"text/css\">
input{margin:0;padding:0;}
.wrap{background-color:#0f0;}
.input_txt,.input_btn{border:0 none;}
</style>


实现方式二：设置CSS，并使用滤镜：

复制代码
代码如下:

<!--[if IE]>
<style type=\"text/css\">
input{margin:0;padding:0;filter:chroma(color=#000000);border:none; }
.wrap{background-color:#0f0;}
</style>
<![endif]-->


此种方式貌似会有点问题！待在真实IE7环境中验证。

二、去掉焦点线：

复制代码
代码如下:

<style type=\"text/css\">
a:focus, *:focus {noFocusLine: expression(this.onFocus=this.blur());}
</style>

本文地址：https://www.stayed.cn/item/13969

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案