Using just semantic CSS Pseudo-Classes you can help define important states for form elements that ensure the user provides the correct data without frustration.

 
input:focus {
outline: none;
box-shadow: 3px 3px 1px rgba(0,0,0,0.2);
border: 1px solid rgba(0,0,0,0.5);
}
fieldset:disabled { /* :enabled opposite */
opacity: 0.5;
}
input:checked + label {
font-style: italic;
}
input:invalid {
border-color: red;
}
input:valid {
border-color: green;
}
input:required {
border-width: 2px;
}

[CSS3] Define Form Element States with CSS Form Pseudo Classes的更多相关文章

  1. [CSS3] Identify Interactive HTML Elements with CSS Link Pseudo Classes

    The interactive pseudo-classes for links (and buttons) allow us to make sure the user knows what ele ...

  2. How to get the value of a form element : check box and radio button

    Getting a radio element and it’s checked value Radio buttons in a form can be grouped together using ...

  3. 前端-form表单与CSS

    目录 form表单 表单属性 label标签 input标签 select 下拉框标签 textarea多行文本 提交 Flask 结合form表单 初探 CSS介绍以及基本选择器 基本选择器 组合选 ...

  4. Element Ui使用技巧——Form表单的校验规则rules详细说明

    Element UI中对Form表单验证的使用介绍: Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item的 prop 属性设置为需校验的字段名 ...

  5. {Django基础十之Form和ModelForm组件}一 Form介绍 二 Form常用字段和插件 三 From所有内置字段 四 字段校验 五 Hook钩子方法 六 进阶补充 七 ModelForm

    Django基础十之Form和ModelForm组件 本节目录 一 Form介绍 二 Form常用字段和插件 三 From所有内置字段 四 字段校验 五 Hook钩子方法 六 进阶补充 七 Model ...

  6. [oldboy-django][2深入django]学生管理(Form)-- 添加(美化Form表单:通过form给前端标签添加属性)

    1 在student_list添加一个a标签, <p><a href="/app01/add_student" class="btn btn-prima ...

  7. jquery.form.js官方插件介绍Form插件,支持Ajax,支持Ajax文件上传

    jquery.form.js官方插件介绍Form插件,支持Ajax,支持Ajax文件上传 http://www.malsup.com/jquery/form/#getting-started [JQu ...

  8. jQuery Form 表单提交插件----Form 简介,官方文档,官方下载地址

     一.jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxF ...

  9. jquery提交form表单插件jquery.form.js

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Linux菜鸟起飞之路【三】Linux常用命令

    一.Linux命令的基本格式 命令 [选项] [参数] a)命令:就是告诉操作系统要做什么 b)选项:说明命令的运行方式,有的会改变命令的功能,选项通常以“-”开始 c)参数:说明命令的操作对象,如文 ...

  2. linux定时任务执行php任务

    首先用命令检查服务是否在运行 systemctl status crond.service 如果服务器上没有装有crontab ,则可以执行 yum install vixie-cron yum in ...

  3. python--MySQL多表查询

    一 介绍 我们在写项目的时候一般都会建一个数据库,数据库里面会存很多的表,不可能把所有的数据都放在一张表里,因为分表来存数据节省空间,数据的组织结构更清晰,解耦和程度更高,但是这些表本质上还不是一个整 ...

  4. SpringMVC里静态网页不能加载到.js .css文件的问题

    在写SpringMVC项目时候,写的js css文件打不开,网上查了一下,解决办法: 在web.xml里面: <servlet> <servlet-name>dispatche ...

  5. Android自动化测试Uiautomator--UiScrollable接口简介

    UiScrollable主要包括以下几个方面的方法: 1.快速滚动 2.获取列表子元素 3.获取与设置最大滚动次数常量值 4.滑动区域校准常量设置与获取 5.先前与向后滚动 6.滚动到某个对象 7.设 ...

  6. 序列化 random模块应用

    序列化 我们今天学习下序列化,什么是序列化呢? 将原本的字典.列表等内容转换成一个字符串的过程就叫做序列化. 为什么要有序列化模块: 比如,我们在python代码中计算的一个数据需要给另外一段程序使用 ...

  7. Eclipse如何创建模拟器

    Eclipse如何创建模拟器下载地址:http://developer.android.com/sdk/index.html#downloadJDK安装包: 1, 打开安卓模拟器控制台(windows ...

  8. hdu2083

    开始忘排序了. #include <stdio.h> #include <math.h> #include <algorithm> using namespace ...

  9. 【Luogu】P3402最长公共子序列(LCS->nlognLIS)

    题目链接 SovietPower 的题解讲的很清楚.Map或Hash映射后用nlogn求出LIS.这里只给出代码. #include<cstdio> #include<cctype& ...

  10. BZOJ 4822 [Cqoi2017]老C的任务 ——树状数组

    直接离散化之后用树状数组扫一遍. 把每一个询问拆成四个就可以做了. %Silvernebula 怒写KD-Tree #include <map> #include <cmath> ...