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 绘制BMW logo实的现代码
Apr 25 HTML / CSS
css3动画效果小结(推荐)
Jul 25 HTML / CSS
HTML5混合开发二维码扫描以及调用本地摄像头
Dec 27 HTML / CSS
html5的localstorage详解
May 09 HTML / CSS
HTML5边玩边学(2)基础绘图实现方法
Sep 21 HTML / CSS
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
May 08 HTML / CSS
HTML5无刷新改变当前url的代码
Mar 15 HTML / CSS
HTML5实现签到 功能
Oct 09 HTML / CSS
JavaScript+Canvas实现自定义画板的示例代码
May 13 HTML / CSS
使用canvas压缩图片大小的方法示例
Aug 02 HTML / CSS
一个基于canvas的移动端图片编辑器的实现
Oct 28 HTML / CSS
使用 CSS 构建强大且酷炫的粒子动画效果
Aug 14 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中防止伪造跨站请求的小招式
2011/09/02 PHP
Chrome Web App开发小结
2014/09/04 PHP
PHP中的函数声明与使用详解
2017/05/27 PHP
自动检查并替换文本框内的字符
2006/06/30 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
2014/10/17 Javascript
jQuery中inArray方法注意事项分析
2016/01/25 Javascript
AngularJS基础 ng-repeat 指令简单示例
2016/08/03 Javascript
javascript 四十条常用技巧大全
2016/09/09 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
2017/03/23 Javascript
AngularJS基于factory创建自定义服务的方法详解
2017/05/25 Javascript
vue2.X组件学习心得(新手必看篇)
2017/07/05 Javascript
Angular6 写一个简单的Select组件示例
2018/08/20 Javascript
vue中使用protobuf的过程记录
2018/10/26 Javascript
vue与iframe之间的信息交互的实现
2020/04/08 Javascript
el-table表头根据内容自适应完美解决表头错位和固定列错位
2021/01/07 Javascript
python 3.6 +pyMysql 操作mysql数据库(实例讲解)
2017/12/20 Python
python3实现跳一跳点击跳跃
2018/01/08 Python
python3+dlib实现人脸识别和情绪分析
2018/04/21 Python
python3.4爬虫demo
2019/01/22 Python
详解Python数据分析--Pandas知识点
2019/03/23 Python
用Python配平化学方程式的方法
2019/07/20 Python
Python logging设置和logger解析
2019/08/28 Python
利用 Flask 动态展示 Pyecharts 图表数据方法小结
2019/09/04 Python
python压包的概念及实例详解
2021/02/17 Python
pandas统计重复值次数的方法实现
2021/02/20 Python
CSS3 实现童年的纸飞机
2019/05/05 HTML / CSS
英国手机零售商:Carphone Warehouse
2018/06/06 全球购物
Ray-Ban雷朋太阳眼镜英国官网:Ray-Ban UK
2019/11/23 全球购物
日本最大的购物网站乐天市场国际版:Rakuten Global Market(支持中文)
2020/02/03 全球购物
村官工作鉴定评语
2014/01/27 职场文书
采购部部长岗位职责
2014/02/06 职场文书
历史专业学生的自我评价
2014/02/28 职场文书
职场干货:简历中的自我评价应该这样写!
2019/05/06 职场文书
导游词之蜀山胜景瓦屋山
2019/11/29 职场文书
MySQL的Query Cache图文详解
2021/07/01 MySQL
Windows Server 2019 域控制器安装图文教程
2022/04/28 Servers