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

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. Bzoj5251 线段树+贪心

    Bzoj5251 线段树+贪心 记录本蒟蒻省选后的第一篇题解!国际惯例的题面:首先这个东西显然是一棵树.如果我们把数值排序,并建立这棵树的dfs序,显然dfs序上的一个区间对应数值的一个区间,且根为数 ...

  2. BZOJ.1076.[SCOI2008]奖励关(概率DP 倒推)

    题目链接 BZOJ 洛谷 真的题意不明啊.. \(Description\) 你有k次选择的机会,每次将从n种物品中随机一件给你,你可以选择选或不选.选择它会获得这种物品的价值:选择一件物品前需要先选 ...

  3. Xtreme8.0 - Kabloom 动态规划

    Xtreme8.0 - Kabloom 题目连接: https://www.hackerrank.com/contests/ieeextreme-challenges/challenges/kablo ...

  4. GitLab查询当前版本

    gitlab-rake gitlab:env:info 其实还有很多方法可以参考GitLab的帮助文档:https://docs.gitlab.com/omnibus/README.html 参考: ...

  5. spring cloud 学习(2) - eureka server注册中心高可用及安全认证

    接上节继续,注册中心单点肯定是不牢靠的,可以参考下面的方案做成注册中心集群: 弄成3个节点,每个节点向其它节点注册,这样只要集群中有一个节点正常工作即可.为了方便在本机弄出这种效果,我们先修改下hos ...

  6. .net core程序部署

    前期将一些程序切换到了.net core,本文这里记录下windows 下.net core程序部署相关的方法.有同样需求的朋友可以参考一下,以免少走一些弯路. .net core程序部署主要工作就是 ...

  7. LDO current regulator for power LED

    LDO current regulator for power LED Challenge You've got a power LED? Great! Build a flash light! Wh ...

  8. There are no packages available for install

    解决方法: ·删除sublime Text 安装目录下Data->Packages目录下的Package Control(如果没有,略过此步骤). ·下载Package Control,下载路径 ...

  9. 《Go学习笔记 . 雨痕》反射

    一.类型(Type) 反射(reflect)让我们能在运行期探知对象的类型信息和内存结构,这从一定程度上弥(mi)补了静态语言在动态行为上的不足.同时,反射还是实现元编程的重要手段. 和 C 数据结构 ...

  10. flashsim配置2015最新版本

    http://blog.csdn.net/Eidosper/article/details/46458469 http://www.doc88.com/p-7314277317013.html htt ...