做了个输入框样式,如图:

CSS代码如下:

<喎�"http://www.2cto.com/kf/ware/vc/" target="_blank" class="keylink">vcD4KPHByZSBjbGFzcz0="brush:java;">#button { cursor:pointer; width:30%; margin:5px; padding:8px; border-radius:4px 4px 4px 4px; font-size:14px; font-weight:bold; } input{ transition:all 0.30s ease-in-out; -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; border:#364f86 1px solid; border-radius:3px; outline:none; } input:focus{ box-shadow:0 0 5px rgba(81, 203, 238, 1); -webkit-box-shadow:0 0 5px rgba(81, 203, 238, 1); -moz-box-shadow:0 0 5px rgba(81, 203, 238, 1); } textarea{ transition:all 0.30s ease-in-out; -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; border:#364f86 1px solid; border-radius:3px; outline:none; } textarea:focus{ box-shadow:0 0 5px rgba(81, 203, 238, 1); -webkit-box-shadow:0 0 5px rgba(81, 203, 238, 1); -moz-box-shadow:0 0 5px rgba(81, 203, 238, 1); } table代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<table>              
                <tbody><tr>
                    <td>用户名</td>
                    <td><input name="username" type="text" id="username" placeholder="用户名" style="height:25px">*</td>
                </tr>
                               
                <tr>
                    <td>联系方式</td>
                    <td><input name="contact" type="text" id="contact" placeholder="电话或邮件地址" style="height:25px">*</td>
                </tr>
 
                <tr>
                    <td>意见及建议</td>
                    <td><textarea name="comment" id="comment" rows="9" cols="112">0</textarea></td>
                </tr>              
                 
                <tr>
                <td colspan="2" align="center"><input type="submit" id="button" value="提交"></td>
                </tr>
</tbody></table>

漂亮的CSS3提交意见输入框样式的更多相关文章

  1. CSS3提交意见输入框样式

    做了个输入框样式,如图: CSS代码例如以下: #button { cursor:pointer; width:30%; margin:5px; padding:8px; border-radius: ...

  2. 36种漂亮的CSS3网页按钮Button样式

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

  3. EasyNVR摄像机无插件直播流媒体服务器前端构建之输入框样式的调整

    EasyNVR授权方式分为软件的授权和硬件授权两种方式,软件授权需要在软件输入永久邀请码可以激化永久授权 起初我们的界面设计是为了满足功能的需求就是 ,用户可以输入激活码提交,完成永久授权. 在实际的 ...

  4. jQuery和CSS3炫酷GOOGLE样式的用户登录界面

    这是一款使用jQuery和CSS3打造的GOOGLE样式的用户登录界面特效.该登录界面特效中,右上角的小问号和错误提示小图标使用SVG来制作.username和password输入框採用浮动标签特效. ...

  5. 纯css3手机页面图标样式代码

    全部图标:http://hovertree.com/texiao/css/19/ 先看效果: 或者点这里:http://hovertree.com/texiao/css/19/hoverkico.ht ...

  6. Bounce.js – 快速创建漂亮的 CSS3 动画效果

    Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...

  7. CSS3透明背景+渐变样式

    CSS3透明背景+渐变样式 转载自博文:<CSS3透明背景+渐变样式> http://blog.csdn.net/netbug_nb/article/details/44343809 效果 ...

  8. 精选 5 个漂亮的 CSS3 图片滑过特效

    这篇文章将为大家分享5款漂亮的CSS3图片滑过特效,比如滑过后显示图片的详细文字介绍,又比如滑过后对图片进行淡入淡出的效果等等.让我们一起来看看,喜欢的朋友赶紧收藏. 1.非常酷的CSS3图片说明效果 ...

  9. 认识CSS3新增选择器和样式

    前端之HTML5,CSS3(二) CSS3新增选择器和样式 CSS3新增选择器 结构伪类选择器 :first-child:选取父元素中的第一个子元素的指定选择器 :last-child:选取父元素中的 ...

随机推荐

  1. php7 & lua 压测对比

    内存:32G CPU:2个6核 接口数据deflate 压缩后 均不到10k, ==== php7 ==== Concurrency Level: 100 Time taken for tests: ...

  2. poj 2253 最短路floyd **

    题意:有两只青蛙和若干块石头,现在已知这些东西的坐标,两只青蛙A坐标和青蛙B坐标是第一个和第二个坐标,现在A青蛙想要到B青蛙那里去,并且A青蛙可以借助任意石头的跳跃,而从A到B有若干通路,问从A到B的 ...

  3. String和StringBuilder、StringBuffer的区别?

    估计很多Java初学者在学习Java的过程中都会遇到这个问题,那就是String,StringBuilder,StringBuffer这三个类之间有什么区别?今天在这里整理一下,希望对大家有帮助哈.如 ...

  4. Codeforces Round #394 (Div. 2) A. Dasha and Stairs 水题

    A. Dasha and Stairs 题目连接: http://codeforces.com/contest/761/problem/A Description On her way to prog ...

  5. BZOJ 4706: B君的多边形 找规律

    4706: B君的多边形 题目连接: http://www.lydsy.com/JudgeOnline/problem.php?id=4706 Description 有一个正n多边形,我们要连接一些 ...

  6. 群晖NAS百度云Docker客户端下载目录没有权限的问题解决

    针对这篇文章:https://zhuanlan.zhihu.com/p/42267779的问题,需要ssh进去群晖,然后把目录设置成777权限.命令如下: sudo chmod -R 777 /vol ...

  7. USBDM Kinetis Debugger and Programmer

    Introduction The FRM-xxxx boards from Freescale includes a minimal SWD based debugging interface for ...

  8. java容器类---概述

    1.容器类关系图 虚线框表示接口. 实线框表示实体类. 粗线框表示最经常使用的实体类. 点线的箭头表示实现了这个接口. 实线箭头表示类能够制造箭头所指的那个类的对象. Java集合工具包位于Java. ...

  9. Revit API风管对齐

    start [Transaction(TransactionMode.Manual)] [Regeneration(RegenerationOption.Manual)] ].Origin, list ...

  10. 在Windows Azure上创建ASP.NET MVC网站

    本篇体验在Windows Azure上创建ASP.NET MVC网站. →登录到Windows Azure管理门户 →点击左下方的"新建" →点击"自定义创建" ...