怎么去掉input获得焦点边框时的边框

来源：蜘蛛抓取(WebSpider) 时间：2016-12-09 09:06 标签： onclick事件
如果以上内容未能解决您的问题，欢迎您到发帖探讨或寻求帮助。
对系统的环境配置、安装、功能进行逐步的说明
常用设置、修改、数据库操作说明等
系统安装使用中常见的错误原因分析及解决
网站做好后如何优化并提高排名？本教程将帮助你快速入门
联系电话：1
QQ：（授权） （定制）
Email：service#pageadmin.net
地址：广东省中山市南头金湾广场B座16号IE6/7下多种方法移除button、input 默认边框和去掉焦点线
作者：佚名
字体：[ ] 来源：互联网 时间：09-02 17:47:48
button、input 默认边框和焦点线确实影响美观，下面为大家讲解下IE6/7下下如何去掉边框、焦点线，具体的实现如下，感兴趣的朋友可以参考下
一、去掉边框： 看看基本的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} &/style& 实现方式二：设置CSS，并使用滤镜： 代码如下: &!--[if IE]& &style type="text/css"& input{margin:0;padding:0;filter:chroma(color=#000000);border: } .wrap{background-color:#0f0;} &/style& &![endif]--& 此种方式貌似会有点问题！待在真实IE7环境中验证。 二、去掉焦点线： 代码如下: &style type="text/css"& a:focus, *:focus {noFocusLine: expression(this.onFocus=this.blur());} &/style&
大家感兴趣的内容
12345678910
最近更新的内容input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
字体：[ ] 类型：转载 时间：
input输入框在获得或失去焦点时隐藏或显示文字，这样的焦点效果想必很多朋友在填写form表格的时候都曾见识过吧，本文使用jquery实现以下，感兴趣的朋友可以参考下哈
input 输入框获得和失去焦点时隐藏或者显示文字我们先看下效果图 输入框默认状态: &输入框获取焦点状态: &大家可以看效果图的搜索输入框，默认显示着“用户名/Email”的提示，当这个 input 输入框获得焦点时，就自动清空等待用户输入，当用户啥也没输入就离开这个 input 输入框时，输入框内又再次显示“用户名/Email”的提示。是不是很常见？很多搜索、登录、表单都会用到这个效果，但是我看了N多个网站，有90%以上是这么实现的：
代码如下: &input type="text" value="搜索关键字" onfocus="if(this.value == '搜索关键字') this.value = ''" onblur="if(this.value =='') this.value = '搜索关键字'" /&
我是非常反对把 javascript 写在 html 标签里的，这和 style 写在 html 标签里一样，虽然不违反 W3C 标准，但也不推荐这么写。因为： 1.完全没有复用性可言，如果是个表单，输入框很多，每个都需要这样的效果，那就每个都这么处理吗？ 2.如果要修改其中的提示文字，费时费力又不好维护。 3.我们倡导结构（html）、表现（css）、行为（javascript）三者分离，这才是一个好的页面。 那要怎么写才能实现这个效果，而且既有复用性，又好维护，又不需要把 js 写进 html 里呢？ 具体方法如下: 首先肯定是引入jQuery Html代码:
代码如下: &div&&input type="text" value="提示测试" class="input_test" /&&/div& &div&&input type="text" value="请输入搜索关键" class="input_test" /&&/div&
jQuery代码:
代码如下: &script type="text/javascript" src="/ajax/libs/jquery/1.7.1/jquery.min.js"&&/script& &script type="text/javascript"& $(function(){ $('.input_test').bind({ focus:function(){ if (this.value == this.defaultValue){ this.value=""; } }, blur:function(){ if (this.value == ""){ this.value = this.defaultV } } }); }) &/script&
只要在实现的input输入框加上”input_test”这个class就可以轻松实现了 查看:
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具input输入框获得焦点后自动显示橙色外框，怎么取消这个外框啊？_css吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：43,648贴子：
input输入框获得焦点后自动显示橙色外框，怎么取消这个外框啊？收藏
#loginwrap input {padding: 7px 0;height: 16width: 170border:line-height: 16background-color:font-size: 14cursor: }
千锋css 名师荟萃 汇聚html5前沿技术 全栈式教学模式 免费试学两周千锋css 0基础4个月快速提升,成就html5实战精英 实战教学 学习就业无缝对接!
如果用火狐和ＩＥ６，就不会显示这个橙色的外框，用搜狗，猎豹会显示橙色的外框
input{outline:none}
登录百度帐号推荐应用
为兴趣而生，贴吧更懂你。或html中如何去掉input获取焦点时候的边框 - HTML/CSS当前位置:& &&&html中如何去掉input获取焦点时候的边框html中如何去掉input获取焦点时候的边框&&网友分享于：&&浏览：0次html中怎么去掉input获取焦点时候的边框
css设置属性：outline:
12345678910
12345678910
12345678910 上一篇：下一篇：文章评论相关解决方案 12345678910 Copyright & &&版权所有

我要回帖

更多关于 onclick事件 的文章

 

随机推荐