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实现DIV圆角效果完整代码
Oct 10 HTML / CSS
css3+jq创作含苞待放的荷花
Feb 20 HTML / CSS
css3 position fixed固定居中问题解决方案
Aug 19 HTML / CSS
纯css3实现效果超级炫的checkbox复选框和radio单选框
Sep 01 HTML / CSS
css3 实现圆形旋转倒计时
Feb 24 HTML / CSS
详解canvas drawImage()方法绘制图片不显示的问题
Oct 08 HTML / CSS
详解Html5原生拖拽操作
Jan 12 HTML / CSS
HTML5中的新元素介绍
Oct 17 HTML / CSS
Canvas与Image互相转换示例代码
Aug 09 HTML / CSS
Html5 audio标签样式的修改
Jan 28 HTML / CSS
使用phonegap进行本地存储的实现方法
Mar 31 HTML / CSS
HTML5 Canvas实现放大镜效果示例
Mar 25 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之第十天
2006/10/09 PHP
PHP 源代码压缩小工具
2009/12/22 PHP
windows下配置apache+php+mysql时出现问题的处理方法
2014/06/20 PHP
PHP关于htmlspecialchars、strip_tags、addslashes的解释
2014/07/04 PHP
javascript对象的property和prototype是这样一种关系
2007/03/24 Javascript
jQuery UI Dialog 创建友好的弹出对话框实现代码
2012/04/12 Javascript
JQuery节点元素属性操作方法
2015/06/11 Javascript
举例讲解AngularJS中的模块
2015/06/17 Javascript
浅谈window对象的scrollBy()方法
2015/07/15 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
2016/08/31 Javascript
微信js-sdk地理位置接口用法示例
2016/10/12 Javascript
bootstrap中的 form表单属性role=&quot;form&quot;的作用详解
2017/01/20 Javascript
vue.js的提示组件
2017/03/02 Javascript
JS中cookie的使用及缺点讲解
2017/05/13 Javascript
Vue 2.0入门基础知识之内部指令详解
2017/10/15 Javascript
layui select 禁止点击的实现方法
2019/09/05 Javascript
js实现鼠标拖拽div左右滑动
2020/01/15 Javascript
vuex(vue状态管理)的特殊应用案例分享
2020/03/03 Javascript
JS数组reduce()方法原理及使用技巧解析
2020/07/14 Javascript
python实现的AES双向对称加密解密与用法分析
2017/05/02 Python
python的mysqldb安装步骤详解
2017/08/14 Python
Python3 Post登录并且保存cookie登录其他页面的方法
2018/12/28 Python
在Python中构建增广矩阵的实现方法
2019/07/01 Python
Python字符串格式化输出代码实例
2019/11/22 Python
HTML5 CSS3给网站设计带来出色效果
2009/07/16 HTML / CSS
日本面向世界,国际级的免税在线购物商城:DOKODEMO
2017/02/01 全球购物
学校后勤岗位职责
2014/02/19 职场文书
小学教师个人先进事迹材料
2014/05/17 职场文书
无房产证房屋转让协议书合同样本
2014/10/18 职场文书
2014年保育员工作总结
2014/12/02 职场文书
项目技术负责人岗位职责
2015/04/13 职场文书
争做文明公民倡议书
2019/06/24 职场文书
经典人生语录分享:不畏将来,不念过去,笑对当下
2019/12/12 职场文书
python pyhs2 的安装操作
2021/04/07 Python
python实战之用emoji表情生成文字
2021/05/08 Python
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/06 其他游戏