表单美化-白红宇

表单美化

阅读量：5160 次

发布时间：2019-06-13

本文共 5504 字，大约阅读时间需要 18 分钟。

清除样式：

单选复选文本下拉

单选框

复选框

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

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;

附件列表

转载于:https://www.cnblogs.com/TT-Cartier/p/4695016.html

你可能感兴趣的文章

struts2请求过程源码分析

查看>>

黑马day14 过滤器概述&生命周期&运行过程

查看>>

SVN文件排除

查看>>

CF Gym 100637G \#TheDress （水）

查看>>

live555源码研究（四）------UserAuthenticationDatabase类

查看>>

C#net多线程多文件压缩下载

查看>>

maven:pom.xml 搭建spring框架基本配置

查看>>

[Python Study Notes]CS架构远程访问获取信息--SERVER端v2.0

查看>>

基于OpenStack构建企业私有云（4-2）Nova_计算节点

___pInvalidArgHandler already defined in LIBCMTD.lib(invarg.obj)

（诊断）git review时出现fatal: ICLA contributor agreement requires current contact information.错误...

查看>>

zz linux 下查看局域网内所有存活主机和MAC进址

Dlib与Opencv中图像格式转换（matrix-Mat）

查看>>