表单美化
清除样式:
单选 复选 文本 下拉
单选框
复选框
隐藏掉复选框 用<b>背景替换 display:block
文本框
HTML5 <Input >中 使用的属性 placeholder文本框空显示的东西 required 不允许空提交 圆角:CSS3
<head>
<title></title>
<link href="css/Clear.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>
<style type="text/css">
body
{
font: 14px/28px "微软雅黑" ;;
}
.contract
{
width: 700px;
height: auto;
background: #F5F6F6;
margin: 40px auto;
padding: 10px;
}
.contract ul
{
width: 700px;
}
.contract ul li
{
border-bottom: 1px solid #DFDFDF;
padding: 10px;
}
.contract ul li label
{
width: 120px;
display: inline-block;
float: left;
height: 20px;
line-height: 20px;
}
.contract ul li input[type=text]
{
width: 220px;
height: 20px;
border: 1px solid #AAAAAA;
padding: 3px 8px;
color: #CCC;
background: url(content/1.png) no-repeat;
background-position: 98% -5px;
border-radius: 10px;
transition: padding 0.25s;
}
.contract ul li input[type=text]:focus
{
border-color: Red;
}
.contract ul li input[type=text]:focus
{
padding-right: 70px;
}
.contract *:focus
{
outline: none;
}
</style>
</head>
<body>
<div class="contract">
<form id="form1" action="#">
<ul>
<li>
<label>
姓名:</label>
<input type="text" name="yourname" value="SunBest" />
</li>
</ul>
</form>
</div>
</body>
</html>
下拉框
JS实现下拉
实现效果:
<html>
<head>
<title>下拉列表</title>
<link href="css/Clear.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.4.1.js" type="text/javascript"></script>
<script src="js/JScript.js" type="text/javascript"></script>
<style type="text/css">
body
{
font: 14x/28px;
font-weight: normal;
font-family: "微软雅黑";
background: #333333;
}
#box
{
margin: 40px auto;
width: 480px;
height: 320px;
border: 3px solid #000000;
background: white;
position: absolute;
left: 50%;
top: 50%;
margin-left: -20%;
margin-top: -200px;
}
.province
{
width: 320px;
height: 42px;
border: 1px solid black;
background-color: Red;
margin: 80px auto;
position: relative;
}
.province strong
{
width: 64px;
height: 42px;
line-height: 42px;
display: inline-block;
float: left;
padding-left: 10px;
}
#selectedProvince
{
height: 42px;
width: 180px;
color: Gray;
padding-left: 10px;
line-height: 42px;
display: block;
float: left;
background: White url(content/down.gif) no-repeat 150px;
cursor: pointer;
}
#allProvince
{
width: 320px;
height: auto;
clear: both;
line-height: 30px;
position: absolute;
z-index:101;
top: 43px;
right: -1px;
border: 1px solid #dfdfdf;
border-top: none;
background-color: White;
display: none;
}
#allProvince li
{
height: 30px;
border-bottom: 1px solid #dfdfdf;
}
#allProvince li b
{
display: block;
float: left;
width: 30px;
text-align: center;
}
#allProvince li span
{
padding-right: 15px;
cursor: pointer;
}
#allProvince li span:hover
{
color: Red;
}
#layer
{
width:100%;
height:100%;
position:absolute;
z-index:100;
<!-- background-color:blue;-->
filter:alpha(opacity=0);
opacity:0.5;
display:none;
}
</style>
<script type="text/javascript">
function getDom(eleId) {
return document.getElementById(eleId);
}
// 点下拉按钮
function showProvince() {
//$("#selectedProvince").toggle(showAllProvince, hideAllProvince);
getDom("selectedProvince").onclick = function () {
if (getDom("allProvince").style.display == "block") {
hideAllProvince();
} else if (getDom("allProvince").style.display != "block") {
showAllProvince();
}
}
}
//显示所有城市
function showAllProvince() {
getDom("layer").style.display = "block";
getDom("allProvince").style.display = "block";
getDom("selectedProvince").style.backgroundImage = "url(content/up.jpg)";
getDom("selectedProvince").style.color = "#CCCCCC";
getDom("layer").onclick = function () {
hideAllProvince();
}
selectProvince();
}
//隐藏所有城市
function hideAllProvince() {
getDom("layer").style.display = "none";
getDom("allProvince").style.display = "none";
getDom("selectedProvince").style.backgroundImage = "url(content/down.gif)";
}
//选择城市
function selectProvince() {
var pro = getDom("allProvince").getElementsByTagName("li");
for (var i = 0; i < pro.length; i++) {
var spans = pro[i].getElementsByTagName("span");
for (var j = 0; j < spans.length; j++) {
spans[j].onclick = function () {
getDom("selectedProvince").innerHTML = this.innerHTML;
hideAllProvince();
getDom("selectedProvince").style.color = "black";
}
}
}
}
addLoadEvent(showProvince);
</script>
</head>
<body>
<div id="box">
<div class="province">
<strong>送货至:</strong> <span id="selectedProvince">北京</span>
<ul id="allProvince">
<li><b>A</b><span>安徽</span></li>
<li><b>A</b><span>安徽</span></li>
<li><b>A</b><span>安徽</span></li>
<li><b>A</b><span>安徽</span></li>
<li><b>A</b><span>安徽</span></li>
<li><b>A</b><span>安徽</span><span>安东</span></li>
<li><b>A</b><span>安徽</span></li>
<li><b>A</b><span>安徽</span></li>
</ul>
</div>
</div>
<div id="layer">
</div>
</body>
</html>
function addLoadEvent(func) {
var oldonload = window.onload; //得到上一个onload函数
if (typeof window.onload != "function") { //判断类型是否为function
window.onload = func;
}
else {
window.onload = function () {
oldonload(); //调用之前覆盖的Onload
func();//执行当前函数
}
}
}
/* File Created: 八月 1, 2015 */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blackquote,th,td
{
margin:0;
padding:0;
}
table
{
border-collapse:collapse;
}
ol,ul
{
list-style:none;
}
address,caption,cite,code,dfn,em,strong,th,var
{
font-weight:400;
font-style:normal;
}
caption,th
{
text-align:left;
}
h1,h2,h3,h4,h5,h6
{
font-weight:400;
font-size:100%;
}
q:before,q:after
{
content:'';
}
fieldset,img,abbr,acronym
{
border:0;
}
附件列表
posted on 2015-08-02 03:15 tongjiahao 阅读(252) 评论(0) 编辑 收藏 举报