单击改变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设计师提出的需求,解 ...
随机推荐
- [Xcode使用 - 3] 复制Xcode5.1.1中的项目模板到Xcode6.1
由于Xcode6中精简了许多的项目和文件模板,导致开发非常不方便,所以这里简单介绍了怎么复制旧版本Xcode中的模板到新的Xcode中 这里要复制的是项目模板Empty Appli ...
- 面试之BI-SQL--table转换
题目如下: Num 1 2 4 6 7 8 10 11 13 写条SQL语句转成下表: Column1 Column2 1 2 4 4 6 ...
- java读取properties的工具类PropertiesUtil
package org.properties.util; import java.io.FileInputStream; import java.io.FileOutputStream; import ...
- 关于Linux vi命令 vi命令一览表
vi是所有UNIX系统都会提供的屏幕编辑器,它提供了一个视窗设备,通过它可以编辑文件.当然,对UNIX系统略有所知的人,或多或少都觉得vi超级难用,但vi是最基本的编辑器,学好了vi,以后在UNIX世 ...
- 让div变得大方美观 bootstrap
<div class="panel panel-default "> <div class="panel-heading"> <h ...
- C++中使用union的几点思考(转)
C++中使用union的几点思考 大卫注:这段时间整理旧资料,看到一些文章,虽然讲的都是些小问题,不大可能用到,但也算是一个知识点,特整理出来与大家共享.与此相关的那篇文章的作者的有些理解是错误的,我 ...
- [RxJS] Introduction to RxJS Marble Testing
Marble testing is an expressive way to test observables by utilizing marble diagrams. This lesson wi ...
- iOS开发——UI_swift篇&TableView自定义聊天界面
TableView自定义聊天界面 1,下面是一个放微信聊天界面的消息展示列表,实现的功能有: (1)消息可以是文本消息也可以是图片消息 (2)消息背景为气泡状图片,同时消息气泡可根据内容自适应大小 ...
- 元数据标签Embed
关于Embed外部资源的使用方法总结 Flex软件中经常需要使用一些外部的资源,如图片.声音.SWF或字体,虽然你也可以在软件运行的时候引入和载入,但是也可能经常需要直接将这些资源编译(Compile ...
- 整型数组与vector对象之间的相互初始化
#include<iostream> #include<vector> #include<string> using namespace std; int main ...