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 please 跨浏览器的CSS3产生器
Mar 14 HTML / CSS
CSS3媒体查询(Media Queries)介绍
Sep 12 HTML / CSS
用CSS3绘制三角形的简单方法
Jul 17 HTML / CSS
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
Nov 16 HTML / CSS
CSS3的 fit-content实现水平居中
Sep 07 HTML / CSS
浅谈CSS3鼠标移入图片动态提示效果(transform)
Nov 06 HTML / CSS
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
Jan 27 HTML / CSS
HTML5 canvas基本绘图之绘制阴影效果
Jun 27 HTML / CSS
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
Jan 06 HTML / CSS
HTML5制作酷炫音频播放器插件图文教程
Dec 30 HTML / CSS
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
Mar 21 HTML / CSS
recorder.js 基于Html5录音功能的实现
May 26 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版(5)
2006/10/09 PHP
利用PHP自动生成印有用户信息的名片
2016/08/01 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
jQuery阻止冒泡和HTML默认操作
2010/11/17 Javascript
用jQuery模拟页面加载进度条的实现代码
2011/12/19 Javascript
jquery实现类似淘宝星星评分功能有截图
2014/09/15 Javascript
JavaScript实现文字跟随鼠标特效
2015/08/06 Javascript
Javascript之面向对象--封装
2016/12/02 Javascript
微信小程序实现form表单本地储存数据
2019/06/27 Javascript
[01:46]TI4西雅图DOTA2前线报道 中国选手抱团调时差
2014/07/08 DOTA
[44:21]Ti4 循环赛第四日 附加赛NEWBEE vs LGD
2014/07/13 DOTA
python网络编程之UDP通信实例(含服务器端、客户端、UDP广播例子)
2014/04/25 Python
centos 下面安装python2.7 +pip +mysqld
2014/11/18 Python
python paramiko模块学习分享
2017/08/23 Python
python实现俄罗斯方块
2018/06/26 Python
详解Django中六个常用的自定义装饰器
2018/07/04 Python
python实现名片管理系统
2018/11/29 Python
ubuntu 16.04下python版本切换的方法
2019/06/14 Python
解决.ui文件生成的.py文件运行不出现界面的方法
2019/06/19 Python
python对常见数据类型的遍历解析
2019/08/27 Python
CSS3的新特性介绍
2008/10/31 HTML / CSS
Html5上传图片 移动端、PC端通用代码
2016/06/08 HTML / CSS
好药师网上药店:安全合法的网上药品零售药房
2017/02/15 全球购物
玩具反斗城天猫官方旗舰店:享誉全球的玩具店
2017/10/10 全球购物
加拿大廉价机票预订网站:CheapOair.ca
2018/03/04 全球购物
心得体会开头
2014/01/01 职场文书
建筑项目策划书
2014/01/13 职场文书
庆祝教师节活动方案
2014/01/31 职场文书
DIY手工制作经营店创业计划书
2014/02/01 职场文书
中级会计职业生涯规划书
2014/03/01 职场文书
yy生日主持词
2014/03/20 职场文书
学校2014年度工作总结
2014/12/06 职场文书
2016廉政教育学习心得体会
2016/01/25 职场文书
php 防护xss,PHP的防御XSS注入的终极解决方案
2021/04/01 PHP
在Python中如何使用yield
2021/06/07 Python
SQL Server 中的事务介绍
2022/05/20 SQL Server