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. 杭电 1051 Wooden Sticks

    Description There is a pile of n wooden sticks. The length and weight of each stick are known in adv ...

  2. cocos2d心得关于精灵帧缓存

    在cocos2d中,精灵帧缓存CCSpriteFrameCache是用来存储精灵帧的.它没有特别的属性,只存储了一些用来管理CCSpriteFrame的方法. 以一个例子来说明,一般在又纹理图集的程序 ...

  3. Django中的tags,母版和继承,组件,静态文件相关,自定义simpletag和自定义inclusion_tag

    Tags for <ul> {% for user in user_list %} <li>{{ user.name }}</li> {% endfor %} &l ...

  4. joyoi2020/lfyzoj114 Rainbow 的信号

    位与位间互不影响.一位一位计算. 长度为 \(1\) 的区间,选出概率为 \(1/n^2\).其余区间,选出概率为 \(2/n^2\).(这里的区间 \(l \leq r\)) 枚举右端点.记 \(l ...

  5. B. Balanced Lineup

    B. Balanced Lineup Time Limit: 5000ms Case Time Limit: 5000ms Memory Limit: 65536KB   64-bit integer ...

  6. Leetcode 334.递增的三元子序列

    递增的三元子序列 给定一个未排序的数组,判断这个数组中是否存在长度为 3 的递增子序列. 数学表达式如下: 如果存在这样的 i, j, k,  且满足 0 ≤ i < j < k ≤ n- ...

  7. P2341 受欢迎的牛

    受欢迎的牛 洛谷链接 题目大意: 有n头牛,牛会喜欢其他牛和自己,而喜欢是可以传递的,求被所有牛喜欢的牛的数量. 思路: 这是一道tarjan缩点的题目.被所有牛都喜欢的牛,一定会在一个强连通分量里. ...

  8. SPOJ - Distinct Substrings,求不同的字串个数!

    DISUBSTR - Distinct Substrings 题意:给你一个长度最多1000的字符串,求不相同的字串的个数. 思路:一个长度为n的字符串最多有(n+1)*n/2个,而height数组已 ...

  9. 手写数字0-9的识别代码(SVM支持向量机)

    帮一个贴吧的朋友改的一段代码,源代码来自<机器学习实战> 原代码的功能是识别0和9两个数字 经过改动之后可以识别0~9,并且将分类器的产生和测试部分分开来写,免得每次测试数据都要重新生成分 ...

  10. BZOJ 3747: [POI2015]Kinoman 【线段树】

    Description 共有m部电影,编号为1~m,第i部电影的好看值为w[i]. 在n天之中(从1~n编号)每天会放映一部电影,第i天放映的是第f[i]部. 你可以选择l,r(1<=l< ...