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设备类型-Media Queries图表简介及使用方法
Jan 21 HTML / CSS
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
Jan 30 HTML / CSS
Application Cache未缓存文件无法访问无法加载问题
May 31 HTML / CSS
使用html5 canvas 画时钟代码实例分享
Nov 11 HTML / CSS
用html5的canvas和JavaScript创建一个绘图程序的简单实例
Jul 06 HTML / CSS
手机端用rem+scss做适配的详解
Nov 15 HTML / CSS
深入浅析HTML5中的article和section的区别
May 15 HTML / CSS
详解android与HTML混合开发总结
Jun 06 HTML / CSS
详解webapp页面滚动卡顿的解决办法
Dec 26 HTML / CSS
关于canvas绘制模糊问题的解决方法
Sep 24 HTML / CSS
HTML5去掉输入框type为number时的上下箭头的实现方法
Jan 03 HTML / CSS
html5视频常用API接口的实战示例
Mar 20 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
CodeIgniter中实现泛域名解析
2014/07/19 PHP
php中使用in_array() foreach array_search() 查找数组是否包含时的性能对比
2015/04/14 PHP
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
2007/04/20 Javascript
javascript 手动给表增加数据的小例子
2013/07/10 Javascript
提高jQuery性能的十个诀窍
2013/11/14 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
2014/07/06 Javascript
js点击文本框后才加载验证码实例代码
2015/10/20 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
2015/12/04 Javascript
JS实现重新加载当前页面或者父页面的几种方法
2016/11/30 Javascript
微信小程序实现锚点定位楼层跳跃的实例
2017/05/18 Javascript
vue-resource调用promise取数据方式详解
2017/07/21 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
2017/12/28 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
2018/03/08 Javascript
页面点击小红心js实现代码
2018/05/26 Javascript
VUE 配置vue-devtools调试工具及安装方法
2018/09/30 Javascript
详解vue项目中调用百度地图API使用方法
2019/04/25 Javascript
Vue 设置axios请求格式为form-data的操作步骤
2019/10/29 Javascript
微信小程序canvas动态时钟
2020/10/22 Javascript
Python中MySQLdb和torndb模块对MySQL的断连问题处理
2015/11/09 Python
利用numpy实现一、二维数组的拼接简单代码示例
2017/12/15 Python
Python基于socket实现简单的即时通讯功能示例
2018/01/16 Python
利用python如何处理nc数据详解
2018/05/23 Python
Python AutoCAD 系统设置的实现方法
2020/04/01 Python
解决Keyerror ''acc'' KeyError: ''val_acc''问题
2020/06/18 Python
python 模拟登陆github的示例
2020/12/04 Python
python基于selenium爬取斗鱼弹幕
2021/02/20 Python
华为旗下电子商务平台:华为商城
2016/08/06 全球购物
澳大利亚在线家具、灯饰和家居装饰店:LivingStyles
2018/11/20 全球购物
餐厅筹备计划书
2014/04/25 职场文书
奥巴马连任演讲稿
2014/05/15 职场文书
儿童生日会策划方案
2014/05/15 职场文书
欢迎领导标语
2014/06/27 职场文书
创先争优个人总结
2015/03/04 职场文书
2015年超市工作总结范文
2015/05/26 职场文书
五一晚会主持词
2015/07/01 职场文书
Java数据结构之堆(优先队列)
2022/05/20 Java/Android