1.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html>

 <head>

 <style>

 input[type="text"]

 {

   width:150px;

   display:block;

   margin-bottom:10px;

   background-color:yellow;

   font-family: Verdana, Arial;

 }

 input[type="button"]

 {

   width:120px;

   margin-left:35px;

   display:block;

   font-family: Verdana, Arial;

 }

 </style>

 </head>

 <body>

 <div class="about-text">

     <form class="contact-from">

        <input type="text" name="text" id="name" placeholder="姓名：">

        <input type="text" name="text" id="e-mail" placeholder="电话：">

        <textarea name="text" id="message" cols="30" rows="5"                       placeholder="咨询内容：" >

 </textarea><br>

        <button class="send">确认提交</button>

     </form>

 </div>

 </body>

 </html>

效果图：

2.

 <form action="" method="post" class="STYLE-NAME">

 <h1>Contact Form

 <span>Please fill all the texts in the fields.</span>

 </h1>

 <label>

 <span>Your Name :</span>

 <input id="name" type="text" name="name" placeholder="Your Full Name" />

 </label>

 <label>

 <span>Your Email :</span>

 <input id="email" type="email" name="email" placeholder="Valid Email Address" />

 </label>

 <label>

 <span>Message :</span>

 <textarea id="message" name="message" placeholder="Your Message to Us"></textarea>

 </label>

 <label>

 <span>Subject :</span><select name="selection">

 <option value="Job Inquiry">Job Inquiry</option>

 <option value="General Question">General Question</option>

 </select>

 </label>

 <label>

 <span>&nbsp;</span>

 <input type="button" class="button" value="Send" />

 </label>

 </form>

效果图：基本灰色

3.

 /* Basic Grey */

 .basic-grey {

 margin-left:auto;

 margin-right:auto;

 max-width: 500px;

 background: #F7F7F7;

 padding: 25px 15px 25px 10px;

 font: 12px Georgia, "Times New Roman", Times, serif;

 color: #888;

 text-shadow: 1px 1px 1px #FFF;

 border:1px solid #E4E4E4;

 }

 .basic-grey h1 {

 font-size: 25px;

 padding: 0px 0px 10px 40px;

 display: block;

 border-bottom:1px solid #E4E4E4;

 margin: -10px -15px 30px -10px;;

 color: #888;

 }

 .basic-grey h1>span {

 display: block;

 font-size: 11px;

 }

 .basic-grey label {

 display: block;

 margin: 0px;

 }

 .basic-grey label>span {

 float: left;

 width: 20%;

 text-align: right;

 padding-right: 10px;

 margin-top: 10px;

 color: #888;

 }

 .basic-grey input[type="text"], .basic-grey input[type="email"], .basic-grey textarea, .basic-grey select {

 border: 1px solid #DADADA;

 color: #888;

 height: 30px;

 margin-bottom: 16px;

 margin-right: 6px;

 margin-top: 2px;

 outline: 0 none;

 padding: 3px 3px 3px 5px;

 width: 70%;

 font-size: 12px;

 line-height:15px;

 box-shadow: inset 0px 1px 4px #ECECEC;

 -moz-box-shadow: inset 0px 1px 4px #ECECEC;

 -webkit-box-shadow: inset 0px 1px 4px #ECECEC;

 }

 .basic-grey textarea{

 padding: 5px 3px 3px 5px;

 }

 .basic-grey select {

 background: #FFF url('down-arrow.png') no-repeat right;

 background: #FFF url('down-arrow.png') no-repeat right);

 appearance:none;

 -webkit-appearance:none;

 -moz-appearance: none;

 text-indent: 0.01px;

 text-overflow: '';

 width: 70%;

 height: 35px;

 line-height: 25px;

 }

 .basic-grey textarea{

 height:100px;

 }

 .basic-grey .button {

 background: #E27575;

 border: none;

 padding: 10px 25px 10px 25px;

 color: #FFF;

 box-shadow: 1px 1px 5px #B6B6B6;

 border-radius: 3px;

 text-shadow: 1px 1px 1px #9E3F3F;

 cursor: pointer;

 }

 .basic-grey .button:hover {

 background: #CF7A7A

 }

效果图：优雅图

css笔记05：表单的更多相关文章

  1. And Design：拓荒笔记——Form表单

    And Design:拓荒笔记——Form表单 Form.create(options) Form.create()可以对包含Form表单的组件进行改造升级,会返回一个新的react组件. 经 For ...

  2. AngularJS 1.2.x 学习笔记（表单校验篇）

    https://my.oschina.net/cokolin/blog/526911 摘要: 本文首发于 blog.csdn.net/vipshop_ebs/article/details/39472 ...

  3. Bootstrap学习笔记(二) 表单

    在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...

  4. Python Tornado初学笔记之表单与模板（一）

    Tornado中的表单和HTML5中的表单具有相同的用途,同样是用于内容的填写.只是不同的是Tornado中的表单需要传入到后台,然后通过后台进行对模板填充. 模板:是一个允许嵌入Python代码片段 ...

  5. 如何写好CSS系列之表单(form)

    表单模块可以分为两部分:一是表单的布局,也就是规范表单元素单元的排列位置:二是表单元素,如:输入框.单选.复选.列表组件.搜索组件等,由于列表组件.搜索组件不是单纯的css组件,所以暂且没有实现. 一 ...

  6. css修改input表单默认样式重置与自定义大全

    链接地址: 伪元素表单控件默认样式重置与自定义大全 http://www.zhangxinxu.com/wordpress/?p=3381 Chrome 现在不支持通过伪元素修改 meter 元素样式 ...

  7. bootstrap学习笔记细化(表单)

    主要属性: class="form-inline" 水平排列 class="form-group" 组键 form-control 圆角方框发光 input-l ...

  8. struts2学习笔记之表单标签的详解:s:checkbox/radio/select/optiontransferselect/doubleselect/combobox

    struts2中的表单标签都是以s标签的方式定义的,同时,struts2为所有标签都提供了一个模板,C:\Users\180172\Desktop\struts2-core-2.2.1.1.jar\t ...

  9. Bootstrap全局CSS样式之表单

    .form-control--将单独的表单控件赋予一些全局样式,如默认宽度width:100%. .form-group--包裹表单控件,获得最好的排列: .form-inline--将表单设置为内联 ...

  10. css实现input表单验证

    有没有办法只通过css来确定input标签是否有输入? 我有这个想法是因为我想完成一个自动补全的input部件,最基本的功能是: 如果input没有内容,这隐藏下拉框 反之,显示下拉框 我找到了一个也 ...

随机推荐

  1. java易混淆概念之类变量、成员变量、局部变量

      类变量.成员变量.局部变量 类变量(也叫静态变量)是类中独立于方法之外的变量,用static 修饰.(static表示“全局的”.“静态的”,用来修饰成员变量和成员方法,或静态代码块(静态代码块独 ...

  2. Install_ruby

    Install rvm 1 2 3 $ curl -L get.rvm.io | bash -s stable $ source ~/.bashrc $ source ~/.bash_profile ...

  3. flot图表的使用

    Flot是一套用Javascript写的绘制图表用的函式库, 专门用在网页上执行绘制图表功能, 由于Flot利用jQuery所以写出来的, 所以也称它为jQuery Flot ,它的特点是体积小.执行 ...

  4. 第二百九十三天 how can I 坚持

    总感觉怪怪的,换了个领导,好烦,虽然对我没用影响. 其实,还是智商低,不懂人情世故,就像...算了,不说了,只能当自己傻. 最近好冷啊,十年不遇的寒冬. 心情有些压抑. 不玩游戏了,看了集康熙来了.小 ...

  5. NSLog说明

    %@ 对象 %d,%i 整型 (%i的老写法) %hd 短整型 %ld , %lld 长整型 %u 无符整型 %f 浮点型和double型 %0.2f 精度浮点数,只保留两位小数 %x,%X 二进制整 ...

  6. CodeForces 682B Alyona and Mex （排序+离散化）

    Alyona and Mex 题目链接: http://acm.hust.edu.cn/vjudge/contest/121333#problem/B Description Someone gave ...

  7. Codeforces 599D Spongebob and Squares（数学）

    D. Spongebob and Squares Spongebob is already tired trying to reason his weird actions and calculati ...

  8. C＋＋库研究笔记——操作符重载实现类型转换＆这样做的意义

    目标: 已知这个接口: std::vector<double> add_vec(double *d1, double *d2) { ..... return result; } 我们自定义 ...

  9. 绑定线程到特定CPU处理器

    参考这篇文章 http://blog.chinaunix.net/uid-27761170-id-5050258.html 代码如下: #define _GNU_SOURCE #include < ...

  10. word2010 ctrl v not work

    终于解决了word 2010中ctrl v 不能用的问题. 0 word ctrl c 可以用,右键粘贴可以正常使用,快捷键ctrl v不能用. 1 在excel中ctrl c 和ctrl v,可以正 ...