[CSS3] Define Form Element States with CSS Form Pseudo Classes
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的更多相关文章
- [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 ...
- 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 ...
- 前端-form表单与CSS
目录 form表单 表单属性 label标签 input标签 select 下拉框标签 textarea多行文本 提交 Flask 结合form表单 初探 CSS介绍以及基本选择器 基本选择器 组合选 ...
- Element Ui使用技巧——Form表单的校验规则rules详细说明
Element UI中对Form表单验证的使用介绍: Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item的 prop 属性设置为需校验的字段名 ...
- {Django基础十之Form和ModelForm组件}一 Form介绍 二 Form常用字段和插件 三 From所有内置字段 四 字段校验 五 Hook钩子方法 六 进阶补充 七 ModelForm
Django基础十之Form和ModelForm组件 本节目录 一 Form介绍 二 Form常用字段和插件 三 From所有内置字段 四 字段校验 五 Hook钩子方法 六 进阶补充 七 Model ...
- [oldboy-django][2深入django]学生管理(Form)-- 添加(美化Form表单:通过form给前端标签添加属性)
1 在student_list添加一个a标签, <p><a href="/app01/add_student" class="btn btn-prima ...
- jquery.form.js官方插件介绍Form插件,支持Ajax,支持Ajax文件上传
jquery.form.js官方插件介绍Form插件,支持Ajax,支持Ajax文件上传 http://www.malsup.com/jquery/form/#getting-started [JQu ...
- jQuery Form 表单提交插件----Form 简介,官方文档,官方下载地址
一.jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxF ...
- jquery提交form表单插件jquery.form.js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Linux菜鸟起飞之路【三】Linux常用命令
一.Linux命令的基本格式 命令 [选项] [参数] a)命令:就是告诉操作系统要做什么 b)选项:说明命令的运行方式,有的会改变命令的功能,选项通常以“-”开始 c)参数:说明命令的操作对象,如文 ...
- linux定时任务执行php任务
首先用命令检查服务是否在运行 systemctl status crond.service 如果服务器上没有装有crontab ,则可以执行 yum install vixie-cron yum in ...
- python--MySQL多表查询
一 介绍 我们在写项目的时候一般都会建一个数据库,数据库里面会存很多的表,不可能把所有的数据都放在一张表里,因为分表来存数据节省空间,数据的组织结构更清晰,解耦和程度更高,但是这些表本质上还不是一个整 ...
- SpringMVC里静态网页不能加载到.js .css文件的问题
在写SpringMVC项目时候,写的js css文件打不开,网上查了一下,解决办法: 在web.xml里面: <servlet> <servlet-name>dispatche ...
- Android自动化测试Uiautomator--UiScrollable接口简介
UiScrollable主要包括以下几个方面的方法: 1.快速滚动 2.获取列表子元素 3.获取与设置最大滚动次数常量值 4.滑动区域校准常量设置与获取 5.先前与向后滚动 6.滚动到某个对象 7.设 ...
- 序列化 random模块应用
序列化 我们今天学习下序列化,什么是序列化呢? 将原本的字典.列表等内容转换成一个字符串的过程就叫做序列化. 为什么要有序列化模块: 比如,我们在python代码中计算的一个数据需要给另外一段程序使用 ...
- Eclipse如何创建模拟器
Eclipse如何创建模拟器下载地址:http://developer.android.com/sdk/index.html#downloadJDK安装包: 1, 打开安卓模拟器控制台(windows ...
- hdu2083
开始忘排序了. #include <stdio.h> #include <math.h> #include <algorithm> using namespace ...
- 【Luogu】P3402最长公共子序列(LCS->nlognLIS)
题目链接 SovietPower 的题解讲的很清楚.Map或Hash映射后用nlogn求出LIS.这里只给出代码. #include<cstdio> #include<cctype& ...
- BZOJ 4822 [Cqoi2017]老C的任务 ——树状数组
直接离散化之后用树状数组扫一遍. 把每一个询问拆成四个就可以做了. %Silvernebula 怒写KD-Tree #include <map> #include <cmath> ...