HTML页面表单输入框去掉鼠标选中后边框变色的效果

  标题说的有些含糊,实在不知道怎么描述了,就简单说一下吧,一个最简单的表单,代码如下,没有任何样式和名字,

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>文本框鼠标点中时边框不变色</title>
 6 </head>
 7 <body>
 8     <input type="text" />
 9 </body>
10 </html>

那么浏览器在默认状态下表单工作时会有个边框效果,就是选中后的效果,我们来看

360安全浏览器        360极速浏览器             chrome浏览器

这三种效果后两种蓝色边框,比较好看,但是第一个颜色总感觉不是太舒服,下面去掉这个效果,在CSS中加上一行:

.style1{outline: none;}

然后在input里面使用class选择器就行了,class="style1",

现在就没有效果了,另外还可以设置边框的其他颜色

现在就这么一个最简单的框

时间: 2024-08-27 07:36:57

HTML页面表单输入框去掉鼠标选中后边框变色的效果的相关文章

【php页面表单提交】form校验后再提交,非ajax提交

form表单校验后,在执行提交动作: <form method="post" action="{:U('Custom/addmsg')}" id="massage"> <ul> <li><input name="name" maxlength="18" type="text" placeholder="您的姓名" class=

JavaScript学习——完成注册页面表单校验

1.步骤分析 第一步:确定事件(onsubmit)并为其绑定一个函数 第二步:书写这个函数(获取用户输入的数据<获取数据时需要在指定位置定义一个 id>) 第三步:对用户输入的数据进行判断 第四步:数据合法(让表单提交) 第五步:数据非法(给出错误提示信息,不让表单提交) 问题:如何控制表单提交? 关于事件 onsubmit:一般用于表单提交的位置,那么需要在定义函数的时候给出一个 返回值. onsubmit = return checkForm() 2.完成注册页面表单校验(基于HTML&a

使用JQuery.Validate插件来校验页面表单有效性

使用JQuery.Validate插件来校验页面表单有效性?1. [代码] 常见的注册表单元素 <form action="#" method="post"  id="regist">     <table cellpadding="0" cellspacing="0" border="0" class="form_table">      

asp页面表单提交在后台不能获取问题

今天碰到一个奇葩的问题,asp页面表单提交后,有一个文本框<input type="text" name="phone" id="phone" />在后台获取不了, 这个标签在form表单内,也有name属性,但是在后台就是获取不了这个标签的值,而其他的文本框.复选框都可以获取到,这可就奇怪了! 几经周折,终于找到了原因,原来我在提交表单的时候,name = "phone"这个标签此时在一个javascript事件

CSS文字被鼠标选中后的文字颜色及背景

::selection {background:#FF9; color:#F00;}::-moz-selection {background:#FF9; color:#F00;}::-webkit-selection {background:#FF9; color:#F00;} CSS文字被鼠标选中后的文字颜色及背景

HTML 之 Web页面表单form中只有一个input的text元素,按回车默认提交

WEB开发中,如果页面的 form 中只有一个input元素,在该input元素的输入框中按回车(注:此时并没有写对应的onkeydown等事件处理),则浏览器会默认提交表单,请看如下代码: <html> <head> <title>页面中只有一个input元素时默认提交表单</title> </head> <body> <form action="http://www.baidu.com" name=&qu

JavaScript学习——完善注册页面表单校验

1.之前我们已经使用弹出框的方式实现了表单校验的功能,但是此种方式用户体验效果很差 我们希望做成把提示信息和校验结果放在输入栏的后面. 2.步骤分析 (此案例基于HTML&CSS--网站注册页面实现的) 第一步:确定事件(onfocus 聚焦事件)并为其绑定一个函数 第二步:书写绑定函数(在输入框的后面给出提示信息) 第三步:确定事件(onblur 离焦事件)并为其绑定一个函数 第四步:书写函数(对数据进行校验,分别给出提示) JS代码:(传入参数的目的减少重复代码,增加通用性) 1 <sc

使用dreamweaver设计常用注册页面表单验证

网页注册页面验证设计,必须使用dreamweaver的表单来实现,或者spry库. 这里介绍的第一个是最原始的表单验证方式,即没有使用即时验证,需要点击提交按钮才进行验证,也没有使用正则表达式或者AJAX验证,也或者是JQuery的验证,不过这么多验证方式接着第一个后面都会写出来的 1.最原始的注册验证方式,需要通过点击提交按钮才验证 先上图 代码如下: Html代码 复制代码 收藏代码 1. 2. 3. 4. 5.无标题文档 6. 8. 9. 11. 219. 注册步骤: 1.填写信息 > 2

SpringMVC接收页面表单参数-java-电脑编程网

body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI",Tahoma,Helvetica,Sans-Serif,"Microsoft YaHei", Georgia,Helvetica,Arial,sans-serif,宋体, PMingLiU,serif; font-size: 10.5pt; line-height: 1.5;