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 相关文章推荐
利用CSS3的特性改变文本选中时的颜色
Sep 11 HTML / CSS
CSS3实现3D翻书效果
Jun 20 HTML / CSS
详解CSS3浏览器兼容
Dec 14 HTML / CSS
简单几步用纯CSS3实现3D翻转效果
Jan 17 HTML / CSS
浅谈html5 响应式布局
Dec 24 HTML / CSS
HTML5 Convas APIs方法详解
Apr 24 HTML / CSS
HTML5单页面手势滑屏切换原理
Mar 21 HTML / CSS
HTML5 canvas 瀑布流文字效果的示例代码
Jan 31 HTML / CSS
Html5页面中的返回实现的方法
Feb 26 HTML / CSS
html5 canvas手势解锁源码分享
Jan 07 HTML / CSS
CSS3 制作的彩虹按钮样式
Apr 11 HTML / CSS
CSS基础详解
Oct 16 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 memcache扩展的三种安装方法
2009/04/26 PHP
PHP登录环节防止sql注入的方法浅析
2014/06/30 PHP
Laravel中的Auth模块详解
2017/08/17 PHP
javascript学习笔记(一) 在html中使用javascript
2012/06/18 Javascript
css transform 3D幻灯片特效实现步骤解读
2013/03/27 Javascript
JavaScript将页面表格导出为Excel的具体实现
2013/12/27 Javascript
跟我学习javascript创建对象(类)的8种方法
2015/11/20 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
2015/11/23 Javascript
jQuery实现的AJAX简单弹出层效果代码
2015/11/26 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
2016/06/14 Javascript
javascript实现简单的可随机变色网页计算器示例
2016/12/30 Javascript
利用Node.js对文件进行重命名
2017/03/12 Javascript
js实现字符全排列算法的简单方法
2017/05/01 Javascript
ionic环境配置及问题详解
2017/06/27 Javascript
AngularJS中使用three.js的实例详解
2017/07/21 Javascript
详解Vue组件实现tips的总结
2017/11/01 Javascript
JavaScript日期工具类DateUtils定义与用法示例
2018/09/03 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
2019/06/17 Javascript
react基本安装与测试示例
2020/04/27 Javascript
jQuery实现手风琴特效
2021/01/11 jQuery
基于python实现简单日历
2018/07/28 Python
python 重命名轴索引的方法
2018/11/10 Python
Python绘制三角函数图(sin\cos\tan)并标注特定范围的例子
2019/12/04 Python
Jupyter Notebook添加代码自动补全功能的实现
2021/01/07 Python
泰国汽车、火车和轮渡票预订网站:Bus Online Ticket
2017/09/09 全球购物
澳大利亚拥有最佳跳伞降落点和最好服务的跳伞项目运营商:Skydive Australia
2018/03/05 全球购物
英国美术用品购物网站:Cass Art
2019/10/08 全球购物
接口可以包含哪些成员
2012/09/30 面试题
《蓝色的树叶》教学反思
2014/02/24 职场文书
财务管理职业生涯规划书
2014/02/26 职场文书
药剂专业毕业生求职信
2014/06/24 职场文书
关于青春的演讲稿800字
2014/08/22 职场文书
2015年母亲节活动总结
2015/02/10 职场文书
田径运动会通讯稿
2015/07/18 职场文书
学习习近平主席讲话心得体会
2016/01/20 职场文书
Python用any()函数检查字符串中的字母以及如何使用all()函数
2022/04/14 Python