input:enabled{ color:red;}
input:disabled{ color:blue;}
enabled or disable

表单的状态

input:checked{ width:100px;height:100px;}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
input:checked{ width:100px;height:100px;}
</style>
</head>
<body>
<input type="checkbox" />
</body>
</html>

表格获取焦点 input:focus{}        !不适用div

            input:focus{
background: pink;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
input:focus{
background: pink;
}
div:focus{
background: blue;
} </style>
</head>
<body>
<input type="text" value="" />
<div style="width: 200px;height: 200px;background: red;" contenteditable="true" ></div>
</body>
</html>

input:focus

input 模拟单选框

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
input:focus{
background: pink;
}
div:focus{
background: blue;
} </style>
</head>
<body>
<input type="text" value="" />
<div style="width: 200px;height: 200px;background: red;" contenteditable="true" ></div>
</body>
</html>

!importent

css---4表单相关伪类的更多相关文章

  1. html5表单和伪类

    type = "email"; 自带验证格式type = "url"; 网址 http//:type = "tel";移动端会变成数字键盘t ...

  2. 纯CSS实现表单验证

    ladies and 乡亲们,表单验证你在做吗?客户端or服务器端,javascript or jquery,动手写 or 使用插件,今天我们来探索下使用纯css实现表单验证,借以学习css sele ...

  3. CSS选择器详解(伪类) 转 http://blog.csdn.net/Panda_m/article/details/50084699

    CSS选择器详解 之 伪类 伪类对大小写不敏感 结构伪类选择器 结构伪类是CSS3新增的类型选择器,利用DOM树实现元素过滤,通过文档结构的相互关系来匹配元素,可以减少class和id属性的定义,使文 ...

  4. (10)用css建立表单

    1.用css建立表单 本篇资料主要介绍使用css设置表单元素的方法. 表单是网页与用户交互所不可缺少的元素,表单是网页的访问者进行交互的接口,例如大家都常遇到的:网上注册.网上登录.网上交易.网上投票 ...

  5. 学习笔记 第十章 使用CSS美化表单

    第10章   使用CSS美化表单 [学习重点] 正确使用各种表单控件 熟悉HTML5新增的表单控件 掌握表单属性的设置 设计易用性表单页面 10.1  表单的基本结构 表单包含多个标签,由很多控件组成 ...

  6. Reset.css和Normalize.css样式表初始化相关

    (1)Reset.css 简介:在HTML标签在浏览器里有默认的样式,例如 p 标签有上下边距,strong标签有字体加粗样式,em标签有字体倾斜样式.不同浏览器的默认样式之间也会有差别,例如ul默认 ...

  7. HTML&CSS基础-子元素的伪类选择器

    HTML&CSS基础-子元素的伪类选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html的源代码 <!DOCTYPE html> <html& ...

  8. java后台表单验证工具类

    /** * 描述 java后台表单验证工具类 * * @ClassName ValidationUtil * @Author wzf * @DATE 2018/10/27 15:21 * @VerSi ...

  9. 微信小程序相关二、css介绍,菜单制作,表单相关,京东注册页面

    一.第二天上午 1.1上午因为有其他的课所以没有去这个课,不过下午看复习的时候的概括,讲了DTD,语法特性,css选择器以及权重,还有一些简单的样式 1.2 DTD Docuement Type 声明 ...

随机推荐

  1. 笨办法学Python记录--习题1-11

    20140412(习题1-10),和打印较劲: 1. 读这本书时没有按照要求安装Python2,我选择的是最新版3.4.0(官方release),然后悲剧发现完全不兼容,现在摘录2,3区别: 这个星期 ...

  2. Android Canvas save和restoreToCount

    @Override public void draw(Canvas canvas) { if (mDrawable!=null) { int sc=canvas.save(); if (mAnimat ...

  3. unity Tilemap

    瓦片地图 创建 生成 创建一个Tile

  4. OAuth2.0的理解-转自阮一峰博客

    一.应用场景 为了理解OAuth的适用场合,让我举一个假设的例子. 有一个"云冲印"的网站,可以将用户储存在Google的照片,冲印出来.用户为了使用该服务,必须让"云冲 ...

  5. JVM内核-原理、诊断与优化学习笔记(五):GC参数

    文章目录 堆的回顾 串行收集器 并行收集器 ParNew(par-并行的缩写,new-新生代,所以只是新生代并行) Parallel收集器 参数设置 -XX:MaxGCPauseMills -XX:G ...

  6. 高并发神器 Nginx,到底该怎么学?

    Java技术栈 www.javastack.cn 优秀的Java技术公众号 无论开发还是运维,工作上都会遇到性能优化.高并发的问题,而Nginx是一个万能药,它可以在百万并发连接下实现高吞吐量的 We ...

  7. 织梦自增函数[field:global name=autoindex/]常见用法

    看来不少朋友需要不了解这个自增函数的用法,在这里我列举一些常见的写法以及作用.   [field:global name=autoindex/] !--普通打印递增的数字-- [field:globa ...

  8. Docker学习のDocker镜像

    一.列出镜像 命令:docker images [optsions] [repositort] -a 标识列出所有 -f  写过滤条件 --no-trunc  不截断id -q 只显示唯一id rep ...

  9. Django 分页器模板

    返回链接: djang ORM 分页器模板: class Pagination(object): def __init__(self,current_page,all_count,per_page_n ...

  10. JAVA数据结构之红-黑树

    本篇博客我会重点介绍对红-黑树的理解,重点介绍红-黑树的查找,这里我们将要讨论的算法称为自顶向下插入,也就是把沿着树向下查找插入点 Ⅰ.平衡树和非平衡树 平衡树和非平衡树:当插入一组数据关键字是按照升 ...