表单美化 / 憋错料

表单美化

清除样式：

单选复选文本下拉

单选框

复选框

隐藏掉复选框用<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;
}

来自为知笔记(Wiz)

附件列表

时间： 2024-12-17 06:45:05

表单美化的相关文章

表单美化插件

Form Effect - 表单美化插件一个jQuery样式插件,帮助你对表单中的控件进行式样控制. 1)Formly这个基于jQuery的表单美化插件,并带有表单校验功能. http://thrivingkings.com/formly/ 2)jQuery Tags Input这个jQuery插件能够将一个简单的文本输入转换成一个漂亮的Tag列表. http://xoxco.com/clickable/jquery-tags-input 演示地址: http://xoxco.com/clic

jQuery星级评论表单美化代码

最近正在做php第二阶段的项目,由于我们小组做的是游戏评论网站,所以需要用到评分评论的页面,这里我做了个星级评论表单 1.首先,我们需要引入一个jQuery文件,代码如下: 1 /*! 2 * jQuery JavaScript Library v1.5.1 3 * http://jquery.com/ 4 * 5 * Copyright 2011, John Resig 6 * Dual licensed under the MIT or GPL Version 2 licenses. 7 *

input file上传表单美化file按钮美化篇

一.表单input file样式说明 - TOP 本上传表单特效是使用纯DIV+CSS代码实现,兼容各大浏览器,使用方便在此美化基础上稍加CSS美化将获得更好的美化效果,也就是通过DIV CSS样式美化上传表单控件. 二.CSS file美化后效果图 - TOP file表单美化效果图支持多浏览器与老旧版本浏览器,测试IE6-IE8 火狐.谷歌浏览器均兼容. 三.所有HTML+CSS代码: - TOP <!DOCTYPE html PUBLIC "-//W3C//

jQuery表单美化插件jqTransform

jQuery Form表单美化插件jqTransform,非常实用的jQuery插件,自动把你整个Form表单进行美化处理,包括SELECT下拉框.文本框.单选.复选框.按钮等,当然不支持input file文件选择框,这个可以参照我们之前的input file选择框美化教程进行改造,在浏览器兼容方面,兼容 ie 6+, safari 2+, firefox 2+, 1.加载jQuery和插件 <script type="text/javascript" src="js

JavaScript/jQuery 表单美化插件小结

Niceforms Niceforms是一款独立的表单美化工具,当前版本为2.0 官方主页:http://www.emblematiq.com/lab/niceforms/ 官方演示:http://www.emblematiq.com/lab/niceforms/demo/niceforms.html GitHub:https://github.com/emblematiq/Niceforms 使用方法,在页面头部引入以下脚本及样式即可: 复制代码代码如下: <link href="ni

jQuery和CSS3超酷表单美化插件

这是一款效果非常精美炫酷的jQuery和CSS3联系方式表单美化插件.大多数网站上都有让用户填写的联系方式表单,一个设计良好的表单能够大大的提升用户的体验度.该表单美化插件在原生HTML表单的基础上进行加工,并使用jQuery来制作label动画,使表单样式更加大方得体. 这个表单美化插件中包含了常用的表单元素:输入框.下拉框.单选按钮.复选框和文本框. 在线演示:http://www.htmleaf.com/Demo/201503121507.html 下载地址:http://www.html

required和optional表单美化例子

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .container{ max-width: 400px; margin: 20px auto; } input,select,textarea

Html5添加超酷响应式表单美化模板插件教程

一.Html结构 <form class="cbp-mc-form"> <div class="cbp-mc-column"> <label for="first_name">First Name</label> <input type="text" id="first_name" name="first_name" placehol

只用css来美化的上传表单按钮（抄的迅雷的）

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>文件上传</title><link href="css/reset.css" rel="stylesheet" type="text/css"><style type="text/css">.wei