css文本框样式收集
鼠標一上去變成淺綠色
<html>
<head>
<title>css-文本框</title>
<style type="text/css">
<!--
.box1,.box2 { width:144px; height:22px; line-height:22px; border:1px solid #A9BAC9;background:url
(http://cn.yimg.com/i/mail/06/bg_box1.gif) no-repeat #fff; padding:0 3px; font-size:12px; }
.box2 { border:1px solid #9ECC00;}
-->
</style>
</head>
<body>
<INPUT class=box1 id=login
οnmοuseοver="this.className='box2'" onMouseOut="this.className='box1'"
name=login>
</body>
</html>
文本框提示樣式，鼠標點擊獲得焦點時提示內容消失
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>文本框提示樣式</title>
<style type="text/css">
<!--
.a1 {
color: #CCCCCC;
}
.a2 {
color: #000;
}
-->
</style>
</head>
<body>
<input name="n" type="text"/>
<input name="n1" type="text"/>
<script language="javascript">
window.οnlοad=function(){
s('n','Your message1');s('n1','Your message2')
}
function g(a){return document.getElementById(a)}
function s(n,v){
with(g(n)){
className='a1';value=v;
οnfοcus=function(){if(value==v)value='';className='a2'}
οnblur=function(){if(value==''){value=v;className='a1'}}
}
}
</script>
</body>
</html>
3：input文本框樣式
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建網頁 1</title>
<style>
<!--
.username { width:130px; background:#FFFFFF url("/article/upimages/ico_username.gif") 2px 2px no-repeat; padding-
left:18px;BORDER-RIGHT: #E7AD01 1px solid; BORDER-TOP: #E7AD01 1px solid; FONT-SIZE: 13px; BORDER-LEFT: #E7AD01
1px solid; COLOR: #000000; BORDER-BOTTOM: #E7AD01 1px solid; HEIGHT: 20px }
-->
</style>
</head>
<body>
<table cellSpacing="0" cellPadding="0" width="100%" border="0" id="table1">
<tr>
?? <form name="myform" method="post" action="">
??? <td class="login_td">用戶名：<input class="username"
οnmοuseοver="this.style.borderColor='#99E300'" οnmοuseοut="this.style.borderColor='#A1BCA3'" maxLength="12"
name="UserName"></td>
?? </form>
</tr>
</table>
</body>
</html>
只有下劃線的文本框：
<input style="border:0;border-bottom:1 solid black;background:;">
軟件序列號式的輸入框：
<script for="T" event="onkeyup">
if(value.length==3)document.all[event.srcElement.sourceIndex+1].select();
</script>
<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T7" size="5" maxlength="3">
軟件序列號式的輸入框(完整版)：
<script for="T" event="onkeyup">if(value.length==maxLength)document.all[event.srcElement.sourceIndex+1].focus();</script>
<script for="T" event="onfocus">select();</script>
<script for="Submit" event="onclick">
var sn=new Array();
for(i=0;i<T.length;i++)
sn=T.value;
alert(sn.join("—"));
</script>
<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">
<input type="submit" name="Submit">
輸入框景背景透明：
<input style="background:transparent;border:1px solid #ffffff">
鼠標劃過輸入框，輸入框背景色變色：
<INPUT value="Type here" NAME="user_pass" TYPE="text" SIZE="29" οnmοuseοver="this.style.borderColor='black';this.style.backgroundColor='plum'"
style="width: 106; height: 21"
οnmοuseοut="this.style.borderColor='black';this.style.backgroundColor='#ffffff'" style="border-width:1px;border-color=black">
輸入字時輸入框邊框閃爍(邊框為小方型)：
<Script Language="JavaScript">
function borderColor(){
if(self['oText'].style.borderColor=='red'){
self['oText'].style.borderColor = 'yellow';
}else{
self['oText'].style.borderColor = 'red';
}
oTime = setTimeout('borderColor()',400);
}
</Script>
<input type="text" id="oText" style="border:5px dotted red;color:red" οnfοcus="borderColor(this);" οnblur="clearTimeout(oTime);">
輸入字時輸入框邊框閃爍(邊框為虛線)：
<style>
#oText{border:1px dotted #ff0000;ryo:expression(οnfοcus=function light (){with(document.all.oText){style.borderColor=(style.borderColor=="#ffee00"?"#ff0000":"#ffee00");timer=setTimeout(light,500);}},οnblur=function(){this.style.borderColor="#ff0000";clearTimeout(timer)})};
</style>
<input type="text" id="oText">
自動橫向廷伸的輸入框：
<input type="text" style="huerreson:expression(this.width=this.scrollWidth)" value="abcdefghijk">
自動向下廷伸的文本框：
<textarea name="content" rows="6" cols="80" onpropertychange="if(this.scrollHeight>80) this.style.posHeight=this.scrollHeight+5">輸入幾個回車試試</textarea>
后臺文件 [input.asp]
.buttoncss {
???? font-family: "tahoma", "宋體"; /*www.52css.com*/
???? font-size:9pt; color: #003399;
???? border: 1px #003399 solid;
???? color:#006699;
???? border-bottom: #93bee2 1px solid;
???? border-left: #93bee2 1px solid;
???? border-right: #93bee2 1px solid;
???? border-top: #93bee2 1px solid;
???? background-image:url(../images/bluebuttonbg.gif);
???? background-color: #e8f4ff;
???? cursor: hand;
???? font-style: normal ;
???? width:60px;
???? height:22px;
}
二、藍色按鈕
.bluebuttoncss {
???? font-family: "tahoma", "宋體"; /*www.52css.com*/
???? font-size: 9pt; color: #003366;
???? border: 0px #93bee2 solid;
???? border-bottom: #93bee2 1px solid;
???? border-left: #93bee2 1px solid;
???? border-right: #93bee2 1px solid;
???? border-top: #93bee2 1px solid;*/
???? background-image:url(../images/blue_button_bg.gif);
???? background-color: #ffffff;
???? cursor: hand;
???? font-style: normal ;
}
三、紅色按鈕
.redbuttoncss {
???? font-family: "tahoma", "宋體"; /*www.52css.com*/
???? font-size: 9pt; color: #0066cc;
???? border: 1px #93bee2 solid;
???? border-bottom: #93bee2 1px solid;
???? border-left: #93bee2 1px solid;
???? border-right: #93bee2 1px solid;
???? border-top: #93bee2 1px solid;
???? background-image:url(../images/redbuttonbg.gif);
???? background-color: #ffffff;
???? cursor: hand;
???? font-style: normal ;
}
四、選擇按鈕
.selectbuttoncss{
???? font-family: "tahoma", "宋體"; /*www.52css.com*/
???? font-size: 9pt; color: #0066cc;
???? border: 1px #93bee2 solid;
???? border-bottom: #93bee2 1px solid;
???? border-left: #93bee2 1px solid;
???? border-right: #93bee2 1px solid;
???? border-top: #93bee2 1px solid;
???? background-image:url(../images/blue_button_bg.gif);
???? background-color: #ffffff;
???? cursor: hand;
???? font-style: normal ;
} ??
五、綠色按鈕
.greenbuttoncss {
???? font-family: "tahoma", "宋體"; /*www.52css.com*/
???? font-size: 9pt; color: #0066cc;
???? border: 1px #93bee2 solid;
???? border-bottom: #93bee2 1px solid;
???? border-left: #93bee2 1px solid;
???? border-right: #93bee2 1px solid;
???? border-top: #93bee2 1px solid;
???? background-image:url(../images/greenbuttonbg.gif);
???? background-color: #ffffff;
???? cursor: hand;
???? font-style: normal ;
}
六、圖像按鈕
.imagebutton{
???? cursor: hand;???? /*改變鼠標形狀 www.52css.com*/
}
七、頁面正文
body {
???? scrollbar-face-color: #ededf3;
???? scrollbar-highlight-color: #ffffff;
???? scrollbar-shadow-color: #93949f;
???? scrollbar-3dlight-color: #ededf3;
???? scrollbar-arrow-color: #082468;
???? scrollbar-track-color: #f7f7f9;
???? scrollbar-darkshadow-color: #ededf3;
???? font-size: 9pt; /*www.52css.com*/
???? color: #003366;
???? overflow:auto;
}
td { font-size: 12px }
th {
???? font-size: 12px;
}
八、下拉選擇框
select{
???? border-right: #000000 1px solid;
???? border-top: #ffffff 1px solid;
???? font-size: 12px; /*www.52css.com*/
???? border-left: #ffffff 1px solid;
???? color:#003366;
???? border-bottom: #000000 1px solid;
???? background-color: #f4f4f4;
}
九、線條文本編輯框
.editbox{
???? background: #ffffff;
???? border: 1px solid #b7b7b7;
???? color: #003366;
???? cursor: text;
???? font-family: "arial";
???? font-size: 9pt;
???? height: 18px;
???? padding: 1px; /*www.52css.com*/
}
十、多行文本框
.multieditbox{
???? background: #f8f8f8;
???? border-bottom: #b7b7b7 1px solid;
???? border-left: #b7b7b7 1px solid;
???? border-right: #b7b7b7 1px solid;
???? border-top: #b7b7b7 1px solid;
???? color: #000000;
???? cursor: text;
???? font-family: "arial";
???? font-size: 9pt;
???? padding: 1px; /*www.52css.com*/
}
十一、陰影風格的表單
.shadow {
???? position:absolute;
???? z-index:1000;
???? top:0px;
???? left:0px; /*www.52css.com*/
???? background:gray;
???? background-color:#ffcc00;
???? filter : progidximagetransform.microsoft.dropshadow(color=#ff404040,offx=2,offy=2,positives=true);
}
十二、只顯一條橫線的輸入框
.logintxt{
???? border-right: #ffffff 0px solid;
???? border-top: #ffffff 0px solid;
???? font-size: 9pt; /*www.52css.com*/
???? border-left: #ffffff 0px solid;
???? border-bottom: #c0c0c0 1px solid;
???? background-color: #ffffff
}
十三、沒有邊框的輸入框
.noneinput{
???? text-align:center;
???? width:99%;height:99%;
???? border-top-style: none;
???? border-right-style: none;
???? border-left-style: none;
???? background-color: #f6f6f6;
???? border-bottom-style: none;
}
?
總結
以上是生活随笔為你收集整理的css文本框样式收集的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CSS滤镜实现火狐、IE兼容
- 下一篇： 在宝塔环境下安装VUE 及webpack