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教程(8):CSS3透明度指南
Apr 02 HTML / CSS
CSS3的Flexbox布局的简明入门指南
Apr 08 HTML / CSS
CSS3的first-child选择器实战攻略
Apr 28 HTML / CSS
网易微博Web App用HTML5开发的过程介绍
Jun 13 HTML / CSS
如何让IE9以下版本(ie6/7/8)认识html5元素
Apr 01 HTML / CSS
html5教程实现Photoshop渐变色效果
Dec 04 HTML / CSS
整理HTML5中支持的URL编码与字符编码
Feb 23 HTML / CSS
HTML5实现动画效果的方式汇总
Feb 29 HTML / CSS
canvas实现漂亮的下雨效果的示例
Apr 18 HTML / CSS
HTML5声音录制/播放功能的实现代码
May 03 HTML / CSS
h5封装下拉刷新
Aug 25 HTML / CSS
CSS实现单选折叠菜单功能
Nov 01 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
JavaScript与HTML结合的基本使用方法整理
2015/10/12 PHP
PHP获取页面执行时间的方法(推荐)
2016/12/10 PHP
Symfony2针对输入时间进行查询的方法分析
2017/06/28 PHP
JavaScript如何从listbox里同时删除多个项目
2013/10/12 Javascript
超级好用的jQuery圆角插件 Corner速成
2014/08/31 Javascript
封装好的一个万能检测表单的方法
2015/01/21 Javascript
jquery表单验证需要做些什么
2015/11/17 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
2016/05/18 Javascript
简单实现js间歇或无缝滚动效果
2016/06/29 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
2017/04/22 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
2017/05/03 Javascript
JavaScript ES6中const、let与var的对比详解
2017/06/18 Javascript
微信小程序实现团购或秒杀批量倒计时
2020/11/01 Javascript
vue-cli配置全局sass、less变量的方法
2019/06/06 Javascript
JavaScript实现公告栏上下滚动效果
2020/03/13 Javascript
Python 条件判断的缩写方法
2008/09/06 Python
用python读写excel的方法
2014/11/18 Python
Pytorch之Variable的用法
2019/12/31 Python
Python注释、分支结构、循环结构、伪“选择结构”用法实例分析
2020/01/09 Python
python判断变量是否为int、字符串、列表、元组、字典的方法详解
2020/02/13 Python
Jupyter notebook 启动闪退问题的解决
2020/04/13 Python
Python使用Pyqt5实现简易浏览器(最新版本测试过)
2020/04/27 Python
如何配置关联Python 解释器 Anaconda的教程(图解)
2020/04/30 Python
Visual Studio Code搭建django项目的方法步骤
2020/09/17 Python
python 基于opencv实现图像增强
2020/12/23 Python
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
2017/08/18 HTML / CSS
草莓网英国官网:Strawberrynet UK
2017/02/12 全球购物
eharmony澳大利亚:网上约会服务
2020/02/29 全球购物
输入N,打印N*N矩阵
2012/02/20 面试题
网络程序员自荐信
2014/01/25 职场文书
党员自我剖析材料
2014/08/31 职场文书
学习十八届四中全会精神思想汇报
2014/10/23 职场文书
创业计划书之游泳馆
2019/09/16 职场文书
nginx配置proxy_pass中url末尾带/与不带/的区别详解
2021/03/31 Servers
go goroutine 怎样进行错误处理
2021/07/16 Golang
尝试使用Python爬取城市租房信息
2022/04/12 Python