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动画技术
Jan 01 HTML / CSS
基于CSS3实现的黑色个性导航菜单效果
Sep 14 HTML / CSS
css3实现可拖动的魔方3d效果
May 07 HTML / CSS
css3实现文字首尾衔接跑马灯的示例代码
Oct 16 HTML / CSS
分享一个H5原生form表单的checkbox特效代码
Feb 26 HTML / CSS
HTML5 CSS3新的WEB标准和浏览器支持
Jul 16 HTML / CSS
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
Mar 15 HTML / CSS
使用Html5中的cavas画一面国旗
Sep 25 HTML / CSS
通过canvas转换颜色为RGBA格式及性能问题的解决
Nov 22 HTML / CSS
AmazeUI 模态窗口的实现代码
Aug 18 HTML / CSS
AmazeUI中模态框的实现
Aug 19 HTML / CSS
Canvas获取视频第一帧缩略图的实现
Nov 11 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/03/10 日漫
PHP合并discuz用户脚本的方法
2015/08/04 PHP
学习php设计模式 php实现门面模式(Facade)
2015/12/07 PHP
谈谈PHP中substr和substring的正确用法及相关参数的介绍
2015/12/16 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
JavaScript arguments 多参传值函数
2010/10/24 Javascript
js中的屏蔽的使用示例
2013/07/30 Javascript
JS+CSS实现一个气泡提示框
2013/08/18 Javascript
JS连连看源码完美注释版(推荐)
2013/12/09 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
2016/12/08 Javascript
基于vue2的table分页组件实现方法
2017/03/20 Javascript
详解vue-cli中配置sass
2017/06/21 Javascript
你知道JavaScript Symbol类型怎么用吗
2020/01/08 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
2021/02/25 Javascript
python如何重载模块实例解析
2018/01/25 Python
Python实现识别图片内容的方法分析
2018/07/11 Python
django 类视图的使用方法详解
2019/07/24 Python
pytorch常见的Tensor类型详解
2020/01/15 Python
如何在Python 游戏中模拟引力
2020/03/27 Python
解决Python 异常TypeError: cannot concatenate 'str' and 'int' objects
2020/04/08 Python
Django REST 异常处理详解
2020/07/15 Python
Python Charles抓包配置实现流程图解
2020/09/29 Python
flask项目集成swagger的方法
2020/12/09 Python
python 爬虫爬取京东ps4售卖情况
2020/12/18 Python
意大利专业化妆品品牌:KIKO MILANO
2017/02/01 全球购物
小学教师培训感言
2014/02/11 职场文书
文秘求职信范文
2014/04/10 职场文书
中学教师师德承诺书
2014/05/23 职场文书
员工辞职信范文大全
2015/05/12 职场文书
政协工作总结2015
2015/05/20 职场文书
党员发展大会主持词
2015/07/03 职场文书
劳务派遣管理制度(样本)
2019/08/23 职场文书
MySQL锁机制
2021/04/05 MySQL
golang 接口嵌套实现复用的操作
2021/04/29 Golang
Java SSH 秘钥连接mysql数据库的方法
2021/06/28 Java/Android
Nginx的gzip相关介绍
2022/05/11 Servers