单击改变input的边框颜色
input边框变色
今天布局页面的时候发现设计稿多了一项要求,就是点击input框的时候要求框框变色,以前没有遇到过,平时很多时候都用的:hover这次想着一样吧,看了之后发现不是想要的效果,hover是当鼠标触及对象的时候就会发生改变,而我们需要的是点击时候才发生改变,随查了查发现此属性focus记录下来希望对大家有帮助!
:focus 伪类在元素获得焦点时向元素添加特殊的样式
注释:IE 浏览器不支持此属性。
说明
这个伪类应用于有焦点的元素。例如 HTML 中一个有文本输入焦点的输入框,其中出现了文本输入光标;也就是说,在用户开始键入时,文本会输入到这个输入框。其他元素(如超链接)也可以有焦点,不过 CSS 没有定义哪些元素可以有焦点。
a:link {color: #FF0000} a:focus {color: #00FF00}
注释:伪类的名称对大小写不敏感。
注释:伪类可与 CSS 类配合使用:
a.red:visited {color: #FF0000;} <a class="red" href="css_syntax.asp">CSS Syntax</a>
如果上面这个例子中的链接已被访问过,那么它会显示为红色。
实例
规定获得焦点的输入字段的颜色:
input:focus { color:red; }
单击改变input的边框颜色的更多相关文章
- table 鼠标移上去改变单元格边框颜色。
表格定义了border-collapse:collapse;边框会合并为一个单一的边框.会忽略 border-spacing 和 empty-cells 属性. 用td:hover,显示不全
- css只改变input输入框光标颜色不改变文字颜色实现方法
input:focus{color:blue}//光标颜色 input{ text-shadow: 0px 0px 0px red;//文字颜色 -webkit-text-fill-color: tr ...
- 改变input的placeholder颜色
input::-webkit-input-placeholder{ color:#666; } input::-ms-input-placeholder{ color:#666; } input::- ...
- 改变input默认选中颜色
修改 outline-color 属性即可实现
- Vue:选中商品规格改变字体和边框颜色(默认选中第一种规格)
效果图: CSS: <div class="label"> <p>标签类别</p> <ul> <li v-for=" ...
- input 边框颜色
border 的属性 有三个 border:5px solid red; 如果上述值缺少一个没有关系,例如border:#FF0000;是允许的. 分别对应:border-width, border- ...
- Winform改变Textbox边框颜色(转)
namespace MyTextBoxOne { //使用时必须把文本框的BorderStyle为FixedSingle才能使用 //一些控件(如TextBox.Button等)是由系统进程绘制,重载 ...
- 鼠标点击 input,显示瞬间的边框颜色,对之修改与隐藏
示例的是项目中的遇到的,要做成的效果是点击该图片按钮,达到切换图片的效果: HTML代码如下: <input class="dBox3Ulimg" type="im ...
- html中如何修改选中 用input做的搜索框 的边框颜色
html中如何修改选中 用input做的搜索框 的边框颜色 如图,当我鼠标选中输入框时,内边框会变成蓝色 我的问题是: 1.如何把蓝色去掉? 2.如何改成别的颜色? 首先感谢 UI设计师提出的需求,解 ...
随机推荐
- 11235 - Frequent values
<算法竞赛入门经典-训练指南>P198 记录一下区间的左右边界就可以了 #include <iostream> #include <stack> #include ...
- 模板引擎doT.js介绍及如何判断对象为空、如何嵌套循环···
doT.js 灵感来源于搜寻基于 V8 和 Node.js ,强调性能,最快速最简洁的 JavaScript 模板函数 引入 javascript 文件: <script type=" ...
- ABA problem
多线程及多进程编程同步时可能出现的问题,如果一个值被P1读取两次,两次的值相同,据此判断该值没有被修改过,但该值可能在两次读取之间被P2修改为另外一个value,并在P1再次读取之前修改回了原值.P1 ...
- android ipc通信机制之之三,进程通讯方式。
IPC通讯方式的优缺点: IPC通讯方式的对比 名称 优点 缺点 适用场景 Bundle 简单易用 只能传输Bundle支持的数据类型 四大组件的进程通信 文件共享 简单易用 不适合高并发场景,并无法 ...
- 【不积跬步,无以致千里】VIM查找替换归纳总结zz
http://spaces.msn.com/dingy/blog/cns!2F24B9E66A542581!327.entry VIM中常用的替换模式总结. 1,简单替换表达式 替换命令可以在全文中用 ...
- C# WebService的简单和复杂参数类型和结果的JSON格式
Jquery作为一款优秀的JS框架,简单易用的特性就不必说了.在实际的开发过程中,使用JQ的AJAX函数调用WebService 的接口实现AJAX的功能也成了一种比较普遍的技术手段了.WebServ ...
- HDU 4121 Xiangqi 模拟题
Xiangqi Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=4121 ...
- Dijkstra最短路径算法[贪心]
Dijkstra算法的标记和结构与prim算法的用法十分相似.它们两者都会从余下顶点的优先队列中选择下一个顶点来构造一颗扩展树.但千万不要把它们混淆了.它们解决的是不同的问题,因此,所操作的优先级也是 ...
- cocos2dx jsoncpp
jsoncpp下载 http://sourceforge.net/projects/jsoncpp/ 下载解压后用到的是include\json下面的头文件跟src\lib_json下的文件. 导入头 ...
- C#并行编程 (Barrier,CountdownEvent,ManualResetEventSlim,SemaphoreSlim,SpinLock,SpinWait )
背景 有时候必须访问变量.实例.方法.属性或者结构体,而这些并没有准备好用于并发访问,或者有时候需要执行部分代码,而这些代码必须单独运行,这是不得不通过将任务分解的方式让它们独立运行. 当任务和线程要 ...