您现在的位置: 万盛学电脑网 >> 程序编程 >> 网络编程 >> 安卓开发 >> 正文

html5input变颜色代码

作者:佚名    责任编辑:admin    更新时间:2022-06-22

 

下面我们给大家介绍一下html5input变颜色代码吧!希望大家可以在这里学习!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "

<html xmlns="

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>表单效果</title>

<style type="text/css">

*{

margin:0;

padding:0;

}

body{

font-size:63%;

color:#000;

}

/*input*/

.input_on{

padding:2px 8px 0pt 3px;

height:18px;

border:1px solid #999;

background-color:#FFFFCC;

}

.input_off{

padding:2px 8px 0pt 3px;

height:18px;

border:1px solid #CCC;

background-color:#FFF;

}

.input_move{

padding:2px 8px 0pt 3px;

height:18px;

border:1px solid #999;

background-color:#FFFFCC;

}

.input_out{

/*height:16px;默认高度*/

padding:2px 8px 0pt 3px;

height:18px;

border:1px solid #CCC;

background-color:#FFF;

}

/*form*/

ul.input_test{

margin:20px auto 0 auto;

width:500px;

list-style-type:none;

}

ul.input_test li{

width:500px;

height:22px;

margin-bottom:10px;

}

.input_test label{

float:left;

padding-right:10px;

width:100px;

line-height:22px;

text-align:right;

font-size:1.4em;

}

.input_test p{

float:left;

_margin-top:-1px;

}

.input_test span{

float:left;

padding-left:10px;

line-height:22px;

text-align:left;

font-size:1.2em;

color:#999;

}

</style>

</head>

<body>

<ul class="input_test">

<li>

<label for="inp_name">姓名:</label>

<p><input id="inp_name" class="input_out" name="" type="text" onfocus="this.className='input_on';this.onmouseout=''" onblur="this.className='input_off';this.onmouseout=function(){this.className='input_out'};" onmousemove="this.className='input_move'" onmouseout="this.className='input_out'" /></p>

<span>请输入您的姓名</span>

</li>

<li>

<label for="inp_email">Email:</label>

<p><input id="inp_email" class="input_out" name="" type="text" onfocus="this.className='input_on';this.onmouseout=''" onblur="this.className='input_off';this.onmouseout=function(){this.className='input_out'};" onmousemove="this.className='input_move'" onmouseout="this.className='input_out'" /></p>

<span>请输入您的Email</span>

</li>

<li>

<label for="inp_web">网站:</label>

<p><input id="inp_web" class="input_out" name="" type="text" onfocus="this.className='input_on';this.onmouseout=''" onblur="this.className='input_off';this.onmouseout=function(){this.className='input_out'};" onmousemove="this.className='input_move'" onmouseout="this.className='input_out'" /></p>

<span>请输入您的网站</span>

</li>

</ul>

</body>

</html>

以上就是我们给大家介绍的html5input变颜色了。希望大家继续关注我们的网站!