CSS3提交意见输入框样式代码


Posted in HTML / CSS onOctober 30, 2014

做了个输入框样式,如图:
CSS3提交意见输入框样式代码 

CSS代码如下:

复制代码
代码如下:

#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代码如下:
复制代码
代码如下:

<table>
<tr>
<td>用户名</td>
<td><input name="username" type="text" id="username" placeholder="用户名" style="height:25px"></input>*</td>
</tr>
<tr>
<td>联系方式</td>
<td><input name="contact" type="text" id="contact" placeholder="电话或邮件地址" style="height:25px"></input>*</td>
</tr>
<tr>
<td>意见及建议</td>
<td><textarea name="comment" id="comment" rows="9" cols="112" ></textarea></td>
</tr>
<tr>
<td colspan="2"align="center"><input type="submit" id="button" value="提交" /></td>
</tr>
</table>
HTML / CSS 相关文章推荐
CSS中一些@规则的用法小结
Mar 09 HTML / CSS
介绍CSS3使用技巧5个
Apr 02 HTML / CSS
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
Aug 19 HTML / CSS
CSS3 animation实现逐帧动画效果
Jun 02 HTML / CSS
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
Aug 18 HTML / CSS
CSS3下的渐变文字效果实现示例
Mar 02 HTML / CSS
HTML5地理定位与第三方工具百度地图的应用
Nov 17 HTML / CSS
详解Canvas 实现炫丽的粒子运动效果(粒子生成文字)
Feb 01 HTML / CSS
html通过canvas转成base64的方法
Jul 18 HTML / CSS
程序设计HTML5 Canvas API
Apr 08 HTML / CSS
html5版canvas自由拼图实例
Oct 15 HTML / CSS
html5使用canvas压缩图片的示例代码
Sep 11 HTML / CSS
css3实例教程 一款纯css3实现的环形导航菜单
Oct 20 #HTML / CSS
在HTML5中如何使用CSS建立不可选的文字
Oct 17 #HTML / CSS
布局和排版教程 纯css3实现图片三角形排列
Oct 17 #HTML / CSS
IE浏览器单独写CSS样式的几种方法
Oct 14 #HTML / CSS
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
Oct 11 #HTML / CSS
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
Oct 10 #HTML / CSS
css3弹性盒模型(Flexbox)详细介绍
Oct 08 #HTML / CSS
You might like
随时给自己贴的图片加文字的php代码
2007/03/08 PHP
PHP文件下载实例代码浅析
2016/08/17 PHP
基于yaf框架和uploadify插件,做的一个导入excel文件,查看并保存数据的功能
2017/01/24 PHP
通过继承IHttpHandle实现JS插件的组织与管理
2010/07/13 Javascript
JavaScript学习历程和心得小结
2010/08/16 Javascript
js调试工具console.log()方法查看js代码的执行情况
2014/08/08 Javascript
JavaScript中的类数组对象介绍
2014/12/30 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
2015/01/18 Javascript
Nodejs学习笔记之测试驱动
2015/04/16 NodeJs
利用HTML5的画布Canvas实现刮刮卡效果
2015/09/06 Javascript
Jquery日历插件制作简单日历
2015/10/28 Javascript
javascript数据结构之二叉搜索树实现方法
2015/11/25 Javascript
JavaScript利用HTML DOM进行文档操作的方法
2016/03/28 Javascript
基于javascript实现简单的抽奖系统
2020/04/15 Javascript
Bootstrap3制作搜索框样式的方法
2016/07/11 Javascript
JavaScript之Vue.js【入门基础】
2016/12/06 Javascript
js基于myFocus实现轮播图效果
2017/02/14 Javascript
vue 设置proxyTable参数进行代理跨域
2018/04/09 Javascript
vue百度地图 + 定位的详解
2019/05/13 Javascript
利用js canvas实现五子棋游戏
2020/10/11 Javascript
浅谈Vue使用Elementui修改默认的最快方法
2020/12/05 Vue.js
基于python的Tkinter实现一个简易计算器
2015/12/31 Python
Flask框架Flask-Principal基本用法实例分析
2018/07/23 Python
python+selenium实现自动抢票功能实例代码
2018/11/23 Python
详解Python二维数组与三维数组切片的方法
2019/07/18 Python
Python多线程及其基本使用方法实例分析
2019/10/29 Python
Python使用Selenium实现淘宝抢单的流程分析
2020/06/23 Python
Python 如何实现数据库表结构同步
2020/09/29 Python
用python制作个视频下载器
2021/02/01 Python
GUESS盖尔斯法国官网:美国时尚品牌
2016/09/23 全球购物
澳大利亚在线奢侈品时尚零售平台:Azura Runway
2021/01/13 全球购物
什么是表空间(tablespace)和系统表空间(System tablespace)
2013/02/25 面试题
面向对象设计的原则是什么
2013/02/13 面试题
如何填写个人简历自我评价
2013/12/10 职场文书
网络编辑求职信
2014/04/30 职场文书
2014年煤矿安全工作总结
2014/12/04 职场文书