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气泡 css3关键帧动画创建的动态通知气泡
Feb 26 HTML / CSS
使用CSS3制作一个简单的进度条(demo)
May 23 HTML / CSS
CSS3中伪元素::before和::after的用法示例
Sep 18 HTML / CSS
详解Canvas事件绑定
Jun 27 HTML / CSS
web页面录屏实现
Feb 12 HTML / CSS
html5中canvas学习笔记2-判断浏览器是否支持canvas
Jan 06 HTML / CSS
HTML5学习笔记之History API
Feb 26 HTML / CSS
HTML5本地数据库基础操作详解
Apr 26 HTML / CSS
Html5之自定义属性(data-,dataset)
Nov 19 HTML / CSS
关于解决iframe标签嵌套问题的解决方法
Mar 04 HTML / CSS
Canvas 帧动画吃苹果小游戏
Aug 05 HTML / CSS
什么是css原子化,有什么用?
Apr 24 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 随机数的产生、页面跳转、件读写、文件重命名、switch语句
2009/08/07 PHP
js限制文本框为整数和货币的函数代码
2010/10/13 Javascript
JS滚轮事件onmousewheel使用介绍
2013/11/01 Javascript
php析构函数的具体用法小结
2014/03/11 Javascript
jquery获取html元素的绝对位置和相对位置的方法
2014/06/20 Javascript
JavaScript数组各种常见用法实例分析
2015/08/04 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
2016/01/23 Javascript
基于JS实现导航条flash导航条
2016/06/17 Javascript
node.js实现微信JS-API封装接口的示例代码
2017/09/06 Javascript
详解VueJs中的V-bind指令
2018/05/03 Javascript
Bootstrap实现模态框效果
2019/09/30 Javascript
利用JavaScript为句子加标题的3种方法示例
2021/01/05 Javascript
[00:58]他们到底在电话里听到了什么?
2017/11/21 DOTA
一些Python中的二维数组的操作方法
2015/05/02 Python
python简单实现操作Mysql数据库
2018/01/29 Python
基于Python实现剪切板实时监控方法解析
2019/09/11 Python
Matplotlib scatter绘制散点图的方法实现
2020/01/02 Python
python爬虫开发之Request模块从安装到详细使用方法与实例全解
2020/03/09 Python
Python使用Excel将数据写入多个sheet
2020/05/16 Python
vscode调试django项目的方法
2020/08/06 Python
Jacadi Paris美国官方网站:法国童装品牌
2017/10/15 全球购物
FC-Moto瑞典:欧洲最大的摩托车服装和头盔商店之一
2018/11/27 全球购物
Vilebrequin美国官方网上商店:法国豪华泳装品牌
2020/02/22 全球购物
Discard Protocol抛弃协议的作用是什么
2015/10/10 面试题
董事长职责范文
2013/11/08 职场文书
探亲邀请信范文
2014/01/30 职场文书
中学生运动会入场词
2014/02/12 职场文书
七一建党日演讲稿
2014/09/05 职场文书
个人遵守党的政治纪律情况对照检查材料思想汇报
2014/09/25 职场文书
高中生旷课检讨书
2014/10/08 职场文书
2015年基层党组织公开承诺书
2015/01/21 职场文书
金正昆讲礼仪观后感
2015/06/11 职场文书
职位证明模板
2015/06/23 职场文书
图书借阅制度范本
2015/08/06 职场文书
家长对孩子的寒假评语
2015/10/09 职场文书
JVM入门之类加载与字节码技术(类加载与类的加载器)
2021/06/15 Java/Android