1. 禁止为所有被激活的输入框添加边框

*:focus {outline: none}

2. 禁止为被激活的输入框添加边框,说明：".abc"为输入框对象自定义添加的class类命名。

.abc:focus{ outline:none }

3. 也可以自定义输入框被激活时的边框样式

.abc:focus { outline:Blue Solid 4px;}

4.为所有input为text password 的设置激活时的边框样式

input[type="text"]:focus, input[type="password"]:focus { border: 1px #1E90FF solid; background-color: #fff;box-shadow: 0 0 4px rgba(30,144,255,.5);}

5.把input写在label里面 无论是点击文字 还是复选框 都可以勾选复选框

<P><label><input type="checkbox" />点我 <label><input type="checkbox" />点我 <label><input type="checkbox" />点我 </P>

6.给多个input加focus样式

<!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" />

<title></title>

<style type="text/css">

body{

    font:normal 12px/17px Arial;

}

div{

    padding:2px;

}

input, textarea {

     width: 12em;

     border: 1px solid #888;

}

.focus {

     border: 1px solid #f00;

     background: #fcc;

}

</style>

<!--   引入jQuery -->

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>

<script type="text/javascript">

    $(function(){

        $(":input").focus(function(){

              $(this).addClass("focus");

              if($(this).val() ==this.defaultValue){

                  $(this).val("");

              }

        }).blur(function(){

             $(this).removeClass("focus");

             if ($(this).val() == '') {

                $(this).val(this.defaultValue);

             }

        });

    })

    </script>

</head>

<body>

    <form action="" method="post" id="regForm">

        <fieldset>

            <legend>个人基本信息</legend>

                <div>

                    <label  for="username">名称:</label>

                    <input id="username" type="text" value="名称" />

                </div>

                <div>

                    <label for="pass">密码:</label>

                    <input id="pass" type="password" value="密码" />

                </div>

                <div>

                    <label for="msg">详细信息:</label>

                    <textarea id="msg" rows="2" cols="20">详细信息</textarea>

                </div>

        </fieldset>

    </form>

</body>

</html>

7.

<input type="text" value="搜索"  placeholder="搜索" onfocus="this.value=''" />

默认颜色鼠标点击字体颜色变浅  输入后文字自动消失

input相关问题总结的更多相关文章

  1. input相关

    input相关 在ios中输入英文首字母默认大写取消方法 <input autocapitalize="off" autocorrect="off" /& ...

  2. CSS:与input相关的一些样式设置问题

    input是HTML中非常重要,非常常用而又不可替代的元素,在于其相关的样式设置中有时会遇到其他元素不会发生的问题,今天把我印象中的一些小问题和解决方案记录一下. 1.与同行元素上下居中对齐 关于上下 ...

  3. ionic angularJS input 相关指令 以及定时器 的使用

      <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" conte ...

  4. PHP输入流 php://input 相关【转】

    为什么xml_rpc服务端读取数据都是通过file_get_contents(‘php://input', ‘r').而不是从$_POST中读取,正是因为xml_rpc数据规格是xml,它的Conte ...

  5. 16.和input相关的知识点

    1.改变input里面placeholder颜色 <input class="pre_name" type="text" placeholder=&quo ...

  6. js input相关事件（转载）

    1.onfocus  当input 获取到焦点时触发. 2.onblur  当input失去焦点时触发,注意:这个事件触发的前提是已经获取了焦点再失去焦点的时候才会触发该事件,用于判断标签为空.3.o ...

  7. input 相关

    1.label 标签 for 属性同 input 标签 id 属性联系之一

  8. input的type=file触发的相关事件

    与input相关的事件运行的过程.添加了一些相关的方法测试了一下.input的type=file的运行流程. 我们书写了mousedown,mouseup,click,input,change,foc ...

  9. android adb shell input各种妙用

    项目中使用一个开发版,预留两个usb接口.类似华硕TinkerBoard. 一个用户连接摄像头,一个用于adb调试.结果就没了鼠标的接口.多次切换鼠标和摄像头插头,非常不方便,带摄像头的app没法调试 ...

随机推荐

  1. 智能车学习（二十一）——浅谈CCD交叉以及横线摆放

    一.CCD为何要交叉摆放?       首先使用横线摆放,CCD前瞻如果远一点,弯道丢线,再远一点直接窜道.所以需要很多很多代码的工作量,而且过弯的过程相当于没有任何的调节过程,就是一个偏差保持,或者 ...

  2. ITOO 第一个任务，新建界面

    最近我们已经接手了我们传承的的ITOO项目,虽然现在还是学习阶段,但是总是还有一些可以完成的东西的.通过需求学习阶段,对照给的原型,逐渐的我们发现了各种各样的问题,有的是根据个人性格有关,有的是对需求 ...

  3. 【js 方法】js 页面刷新location.reload和location.replace的区别 【转】

    [转]:http://zccst.iteye.com/blog/2162658 reload 方法,该方法强迫浏览器刷新当前页面. 语法: location.reload([bForceGet]) 参 ...

  4. 【spring 注解 错误】使用controller 作为后台给前台ajax交互数据出错

    controller作为后台与前台的ajax进行交互,后台的方法处理完成返回一个boolean类型的值,想传给前台用来判断是否执行成功,BUT,问题来了: 严重: Servlet.service() ...

  5. 【maven + hibernate(注解) +spring +springMVC】 使用maven搭建项目

    研究,百度,查资料+好友帮助,使用MyEcplise2015工具,通过maven搭建hibernate+springMVC+spring的项目,数据库采用MySql5.5 不过使用的版本会在项目搭建过 ...

  6. Android拓展系列(10)--使用Android Studio阅读整个Android源码

    之前一直在windows下用source insight阅读android源码,效果非常好.后来远程异地服务器,网络限制,一直用ssh + vim,现在主要还是以这种方式.最近发现一个不错的东西(早就 ...

  7. 宫格布局实例（注意jquery的版本号要统一）

    <!DOCTYPE html><html><head><meta charset="utf-8" /><style> * ...

  8. MatLab有关路径的几个命令

    窗外雨如注,国庆的第3天,没钱出去逛,更新我的博客吧 今天要说的命令有path.cd.userpath.savepath.pathtool 有两种改变启动目录的方法,第1种使用userpath和sav ...

  9. 快消品销售管理系统,PDA销售管理系统,销售拜访PDA,进销存管理PDA系统 移动扫描打印开单POS

    各种ERP软件的移动订单及移动车销解决方案是针对各个需要快速.便捷的,通过智能PDA移动智能终端设备实现销售订单下达及快速车销的应用解决方案.通过将移动订单及移动车销集成到ERP的移动解决方案,可以帮 ...

  10. 单机c1000k连接

    单机c1000k连接即单机实现百万连接,首先要注意的是连接是虚拟的逻辑的,连接最终落于 网卡,清晰概念才能更深入更清晰的想出问题的解决办法. 参考 http://www.ideawu.net/blog ...