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动画(开启gpu加速)
Dec 23 HTML / CSS
你应该知道的30个css选择器
Mar 19 HTML / CSS
CSS3绘制不规则图形的一些方法示例
Nov 07 HTML / CSS
HTML5使用Audio标签实现歌词同步的效果
Mar 17 HTML / CSS
Html5 Canvas 实现一个“刮刮乐”游戏
Sep 05 HTML / CSS
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
Oct 20 HTML / CSS
Html5百叶窗效果的示例代码
Dec 11 HTML / CSS
HTML5超炫酷粒子效果的进度条的实现示例
Aug 23 HTML / CSS
钉钉企业内部H5微应用开发详解
May 12 HTML / CSS
AmazeUI图片轮播效果的示例代码
Aug 20 HTML / CSS
企业开发CSS命名BEM代码规范实践
Feb 12 HTML / CSS
HTML静态页面获取url参数和UserAgent的实现
Aug 05 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
《雄兵连》《烈阳天道》真的来了
2020/07/13 国漫
PHP中的串行化变量和序列化对象
2006/09/05 PHP
浅析PHP原理之变量分离/引用(Variables Separation)
2013/08/09 PHP
JavaScript创建命名空间的5种写法
2014/06/24 PHP
destoon实现调用热门关键字的方法
2014/07/15 PHP
PHP中使用strpos函数实现屏蔽敏感关键字功能
2014/08/21 PHP
确保Laravel网站不会被嵌入到其他站点中的方法
2019/10/18 PHP
JavaScript中“+=”的应用
2007/02/02 Javascript
js监听表单value的修改同步问题,跨浏览器支持
2009/12/31 Javascript
javascript 获取元素样式必杀技
2014/05/04 Javascript
asp.net中oracle 存储过程(图文)
2015/08/12 Javascript
jQuery获取字符串中出现最多的数
2016/02/22 Javascript
Backbone中View之间传值的学习心得
2016/08/09 Javascript
微信小程序 点击控件后选中其它反选实例详解
2017/02/21 Javascript
微信小程序 下拉菜单的实现
2017/04/06 Javascript
微信小程序如何获取用户信息
2018/01/26 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
2020/04/12 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
2019/06/04 Javascript
JavaScript中BOM对象原理与用法分析
2019/07/09 Javascript
深入学习python的yield和generator
2016/03/10 Python
win10系统中安装scrapy-1.1
2016/07/03 Python
python 多线程中子线程和主线程相互通信方法
2018/11/09 Python
如何利用Python分析出微信朋友男女统计图
2019/01/25 Python
基于python的ini配置文件操作工具类
2019/04/24 Python
Python微信操控itchat的方法
2019/05/31 Python
django使用django-apscheduler 实现定时任务的例子
2019/07/20 Python
python画图常规设置方式
2020/03/05 Python
python安装dlib库报错问题及解决方法
2020/03/16 Python
Django实现前台上传并显示图片功能
2020/05/29 Python
python识别验证码的思路及解决方案
2020/09/13 Python
大女孩胸罩:Big Girls Bras
2016/12/15 全球购物
学生励志演讲稿
2014/01/06 职场文书
旅游节目策划方案
2014/05/26 职场文书
同志主要表现材料
2014/08/21 职场文书
怎么写工作检讨书
2014/11/16 职场文书
使用python如何删除同一文件夹下相似的图片
2021/05/07 Python