应用Css美化表单
原来的效果
<style>
.container {
margin:0auto;
width:620px;
}
fieldset {
padding:18px;
background-color:#c7fff5;
}
fieldset legend {
font-size: larger;
border:1px darkgray solid;
padding:10px;
background-color: white;
}
input[type="text"],
input[type="tel"],
input[type="email"],
textarea {
display: block;
width:96%;
padding:2%;
margin:0020px0;
border:1px solid silver;/*为输入控件添加border,使之与label对齐*/
border-top: none;
font-size:12px;
}
textarea {
resize: none;/*不允许调整textarea的大小,但IE浏览器本身就不支持调整textarea的大小*/
}
label {
display: block;
width:98%;
padding:1%;
font-size:12px;
background-color: cornflowerblue;
color: aliceblue;
border:1px solid slategray;/*为label元素添加border元素使之与输入控件对齐*/
}
input[type="reset"], input[type="submit"]{
margin:10px30px;
background-color: darkorange;
color: white;
padding:5px;
height:45px;
width:80px;
border:0;
}
input[type="reset"], input[type="submit"]:hover {
cursor: pointer;
border-color: royalblue;
}
input[type="reset"], input[type="submit"]:active {
cursor: pointer;
border-color: black;
outline-color: cornflowerblue;
}
</style>
</head>
<body>
<divclass="container">
<h2>应用样式美化表单</h2>
<hr/>
<form>
<fieldset>
<legend>Contact</legend>
<labelfor="userName">Name:</label><inputtype="text"id="userName"><br/>
<labelfor="userEmail">Email Address:</label><inputtype="email"name="userEmail"id="userEmail"><br/>
<labelfor="homeAddress">Address:</label><inputtype="text"id="homeAddress"><br/>
<labelfor="phoneNum">Phone Number:</label><inputtype="tel"id="phoneNum"><br/>
<labelfor="messages">Messages:</label><textareaid="messages"cols="10"rows="2"></textarea>
</fieldset>
<inputtype="reset"value="Reset"> <inputtype="submit"value="Submit">
</form>
</div>
应用Css美化表单的更多相关文章
- 学习笔记 第十章 使用CSS美化表单
第10章 使用CSS美化表单 [学习重点] 正确使用各种表单控件 熟悉HTML5新增的表单控件 掌握表单属性的设置 设计易用性表单页面 10.1 表单的基本结构 表单包含多个标签,由很多控件组成 ...
- CSS3美化表单 移动端可用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- 纯CSS实现表单验证
ladies and 乡亲们,表单验证你在做吗?客户端or服务器端,javascript or jquery,动手写 or 使用插件,今天我们来探索下使用纯css实现表单验证,借以学习css sele ...
- (10)用css建立表单
1.用css建立表单 本篇资料主要介绍使用css设置表单元素的方法. 表单是网页与用户交互所不可缺少的元素,表单是网页的访问者进行交互的接口,例如大家都常遇到的:网上注册.网上登录.网上交易.网上投票 ...
- CSS3美化表单控件
表单的默认控件在不同的浏览器中的样式不同,用户体验很差.用CSS3可以实现表单控件的美化,可以提供更好的用户体验.不足之处就是浏览器的兼容性问题. 一.下拉控件 效果图: 下拉控件的布局结构: < ...
- css表格表单和统筹
css:表格表单和统筹 学习目标 1.表单标签及属性高级 2.表格标签及属性高级 3.CSS统筹 4.BFC概念和应用场景 一.表单标签及属性高级 回顾: 表单的作用:用来收集用户的信息的; 表单的组 ...
- CSS之表单元素
表单就是收集用户信息的,就是让用户填写的.选择的. 1 <div> 2 <h3>欢迎注册本网站&l ...
- 一天搞定CSS:表单(form)--20
1.表单标签 2.input标签属性与取值 代码演示 <!DOCTYPE html> <html> <head> <meta charset="UT ...
- CSS实现表单
效果图如下: HTML代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
随机推荐
- [翻译]AKKA笔记 - ACTOR MESSAGING - REQUEST AND RESPONSE -3
上次我们看Actor消息机制,我们看到开火-忘记型消息发出(意思是我们只要发个消息给Actor但是不期望有响应). 技术上来讲, 我们发消息给Actors就是要它的副作用. 这就是这么设计的.除了不响 ...
- SVNServer迁移
本文主要记录SVNServer从windows系列迁移到Centos的过程,以下几篇文章已经描述的很好了,本文就不再赘述. 注意问题: 配置权限时空格问题:包括前面不能有空格,=两边有空格等. 参考链 ...
- ios 截屏
把当前屏幕作为获取成为图片 - (UIImage *)rn_screenshot { UIGraphicsBeginImageContext(self.bounds.size); [sel ...
- jQuery核心技术-----------------------------------------------------()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Java-类和对象基础练习
1.创建一个三角形类,成员变量三边,方法求周长,创建类主类A来测试它. package liu0919; public class Sanjiao { public double z(double a ...
- 纯js实现复制到剪贴板功能
在网页上复制文本到剪切板,一般是使用JS+Flash结合的方法,网上有很多相关文章介绍.随着 HTML5 技术的发展,Flash 已经在很多场合不适用了,甚至被屏蔽.本文介绍的一款JS插件,实现了纯J ...
- Eclipse中java获得mysql的查询结果集
不废话,先上代码,再上解释说明 package com.ningmeng; import java.sql.*; /** * 1:获取查询结果集 * @author biexiansheng * */ ...
- Android 图片文件操作、屏幕相关、.9图片的理解
一:Android图片操作 1.存储bitmap到本地文件系统 public static void bitmapToFile(Bitmap bitmap, String uri) { if(!ex ...
- chrome远程调试真机上的app
chrome远程调试真机上的app 看来要上真机了...
- mysql基础知识扫盲
本篇主要介绍关于mysql的一些非常基础的知识,为后面的sql优化做准备. 一:连接mysql 关于mysql的下载和安装我在这里就不说了,第一步我们要连接我们的mysql服务器,打开cmd命令切换到 ...