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 动画技术
Jul 27 HTML / CSS
在css3中background-clip属性与background-origin属性的用法介绍
Nov 13 HTML / CSS
css3圆角样式分享自定义按钮样式
Dec 27 HTML / CSS
一款利用纯css3实现的超炫3D表单的实例教程
Dec 01 HTML / CSS
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
Apr 26 HTML / CSS
CSS3动画:5种预载动画效果实例
Apr 05 HTML / CSS
CSS3实现苹果手机解锁的字体闪亮效果示例
Jan 05 HTML / CSS
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
Jan 31 HTML / CSS
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
May 07 HTML / CSS
HTML5新增的表单元素和属性实例解析
Jul 07 HTML / CSS
浅析canvas元素的html尺寸和css尺寸对元素视觉的影响
Jul 22 HTML / CSS
原生CSS实现文字无限轮播的通用方法
Mar 30 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设计模式 DAO(数据访问对象模式)
2011/06/26 PHP
美图秀秀web开放平台--PHP流式上传和表单上传示例分享
2014/06/22 PHP
php封装的smartyBC类完整实例
2016/10/19 PHP
PHP defined()函数的使用图文详解
2019/07/20 PHP
解决AJAX中跨域访问出现'没有权限'的错误
2008/08/20 Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
2011/11/14 Javascript
关于jQuery object and DOM element
2013/04/15 Javascript
jquery对ajax的支持介绍
2013/12/10 Javascript
JavaScript中的操作符==与===介绍
2014/12/31 Javascript
在Javascript中处理数组之toSource()方法的使用
2015/06/09 Javascript
node.js中 stream使用教程
2016/08/28 Javascript
jQuery动态添加与删除tr行实例代码
2016/10/18 Javascript
javascript 面向对象function详解及实例代码
2017/02/28 Javascript
微信小程序 http请求的session管理
2017/06/07 Javascript
详解node nvm进行node多版本管理
2017/10/21 Javascript
node全局变量__dirname与__filename的区别
2019/01/14 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
2019/09/09 Javascript
Angular 多模块项目构建过程
2020/02/13 Javascript
vuex存取值和映射函数使用说明
2020/07/24 Javascript
Element Dialog对话框的使用示例
2020/07/26 Javascript
Python中遇到的小问题及解决方法汇总
2017/01/11 Python
python定向爬虫校园论坛帖子信息
2018/07/23 Python
Windows下python3.7安装教程
2018/07/31 Python
Jmeter HTTPS接口测试证书导入过程图解
2020/07/22 Python
matplotlib设置颜色、标记、线条,让你的图像更加丰富(推荐)
2020/09/25 Python
python 制作磁力搜索工具
2021/03/04 Python
HTML5的表单(绝对特别强大的功能)使用示例
2013/06/20 HTML / CSS
微软马来西亚官方网站:Microsoft马来西亚
2019/11/22 全球购物
N:Philanthropy官网:美国洛杉矶基础款服装
2020/06/09 全球购物
学校安全责任书
2014/04/14 职场文书
党建工作先进材料
2014/05/02 职场文书
乡镇党的群众路线教育实践活动总结报告
2014/10/30 职场文书
会计实训总结范文
2015/08/03 职场文书
html5中sharedWorker实现多页面通信的示例代码
2021/05/07 Javascript
pytorch DataLoader的num_workers参数与设置大小详解
2021/05/28 Python
小程序与后端Java接口交互实现HelloWorld入门
2021/07/09 Java/Android