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>
时间: 2024-10-14 23:54:42

CSS3提交意见输入框样式的相关文章

标准页面输入框样式(整体)

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServ

HTML5 & CSS3初学者指南(2) – 样式化第一个网页

介绍 我们已经使用基本的 HTML 编写了一个网页.但是,写出来的 HTML 代码的网页看起来很平淡,没有吸引力. 如何改善这种很平淡的页面呢? 让我们开始使用网页的基本样式来改善页面效果,我们将会使用到 CSS 的功能. 正式开始 CSS 是层叠样式表的缩写,它是为网页添加样式的通用语言,在所有浏览器中都支持.最新的标准是 CSS3,这与早期版本完全向后兼容.CSS3 的规范是由 W3C 开发的,目前仍处于开发阶段,其最新的版本是 CSS Snapshot 2010. 打开你的文本编辑器,键入

input.style.borderColor及input.style.backgroundColor 输入框样式特效 鼠标移过输入框 输入框背景变色

html <!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <title>输入框样式特效</title> <script src="../js/try.js"></script></head><body bgcolor="#ffcc99"

CSS3 3D分页按钮样式

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>石家庄礼品公司</title><style>.ui-page{border: 0px;background: #37578C;background: -webkit-linear-gradient(#37578C, #608BAE);background: -moz-linear-grad

jQuery和CSS3炫酷GOOGLE样式的用户登录界面

这是一款使用jQuery和CSS3打造的GOOGLE样式的用户登录界面特效.该登录界面特效中,右上角的小问号和错误提示小图标使用SVG来制作,用户名和密码输入框采用浮动标签特效,可点击的按钮上使用了很酷的点击波特效. 整个登录界面简洁大方,互动性很强. 在线演示:http://www.htmleaf.com/Demo/201503131515.html 下载地址:http://www.htmleaf.com/jQuery/Form/201503131514.html

36种漂亮的CSS3网页按钮Button样式

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>36种漂亮的CSS3网页按钮Button样式</title> <style type="text/css"> body{ background: #f5faff; } .demo_con{ width: 960px; m

HTML5 移动开发(CSS3设计移动页面样式)

1.如何创建CSS样式表 2.CSS3的卓越特性 3.基于设备属性改变样式的媒体查询 4.如何使用属性改变元标签创建更美观移动页面   层叠样式表是移动WEB开发中的一个重要组成部分,本次分享将学到如何编写CSS并用它为移动页面定制样式,其中包括媒体查询为特定设备定制样式表.此外还将了解一些影响移动设备内容显示的元标签 创建好的样式,可通过三种方法附加到样式表里 1.内联到标签中   [建议在测试的时候这么做] 2.内嵌于HTML的开头 3.放在一个独立文档中作为样式表  [推荐的做法]*能够提

36种漂亮的CSS3网页按钮Button样式,总有你喜欢的

<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><title>36种漂亮的CSS3网页按钮Button样式</title><style type="text/css">body{ background: #f5faff;}.demo_con{width: 960px;margin:40px

css3 设置滚动条的样式

::-webkit-scrollbar { width: 14px; height: 14px; } ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb { border-radius: 999px; border: 5px solid transparent; } ::-webkit-scrollbar-track { box-shadow: 1px 1px 5px rgba(0,0,0,.2) inset; } ::-webkit-scr