當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

css文本框样式收集

發布時間：2025/3/21 编程问答 23 豆豆

生活随笔收集整理的這篇文章主要介紹了 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">

</style>
</head>

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>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>文本框輸入提示</title>

<!--

.keyword {...}{width:150px; height:20px; border:#0066FF 1px solid;}/**//*文本框樣式*/

#keytishi {...}{width:150px; height:auto; border:#0066FF 1px solid; position:absolute; display:none;}/**//*提示層樣式*/

#keytishi ul {...}{ margin:0;}/**//*提示層樣式*/

#keytishi ul li{...}{margin:0;list-style-type:none; line-height:16px; height:16px; font-size:12px; padding:2px;}/**//*提示層樣式*/

#keytishi ul li a {...}{display:block; width:150px; height:16px; text-decoration:none;}/**//*提示層樣式*/

#keytishi ul li a:hover {...}{background-color:#0099FF;}/**//*提示層樣式*/

-->

</style>

<!--

//建立XMLHttpRequest對象

var xmlhttp;

try...{

????xmlhttp= new ActiveXObject('Msxml2.XMLHTTP');

}catch(e)...{

???? try...{

????????xmlhttp= new ActiveXObject('Microsoft.XMLHTTP');

???? }catch(e)...{

???????? try...{

????????????xmlhttp= new XMLHttpRequest();

???????? }catch(e)...{}

???? }

}

function getKeyWord()...{

???? var obj = document.getElementById("search");//獲取文本域對象

???? if(obj.value=="")...{

???????? return;

???? }

???? var top=0;

???? var left=0;

???? while(obj)...{//此循環得到文件域對象在頁面中的絕對位置

???????? top += obj["offsetTop"];

???????? left += obj["offsetLeft"];

????????objobj = obj.offsetParent;

???? }

???? xmlhttp.open("get","input.asp?keyword="+document.getElementById("search").value,true);

????xmlhttp.onreadystatechange = function()...{

???????? if(xmlhttp.readyState == 4)

???????? ...{

???????????? if(xmlhttp.status == 200)

???????????? ...{

???????????????? if(xmlhttp.responseText!="")...{

???????????????????? document.getElementById("keytishi").innerHTML = unescape(xmlhttp.responseText);//把后臺返回的數據填充到提示層

???????????????????? document.getElementById("keytishi").style.left = left + "px";//設置提示層的位置,左

???????????????????? document.getElementById("keytishi").style.top = (top + 25) + "px";//設置提示層的位置,上

???????????????????? document.getElementById("keytishi").style.display = "block";//設置提示層可見

???????????????? }else...{

???????????????????? document.getElementById("keytishi").innerHTML = "";//清空提示層

???????????????????? document.getElementById("keytishi").style.display = "none";//設置提示層不可見

???????????????? }

???????????? }

???????????? else...{

????????????

???????????? }

???????? }

???? }

???? xmlhttp.setRequestHeader("If-Modified-Since","0");

???? xmlhttp.send(null);

}

function input(str)...{

???? document.getElementById("search").value=str;//從提示層選擇你需要的數據填充到文本框

???? document.getElementById("keytishi").innerHTML = "";//清空提示層

???? document.getElementById("keytishi").style.display = "none";//設置提示層不可見

}

//-->

</script>

</head>

<body>

</body>

</html>

后臺文件 [input.asp]

<%...@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>

<%...

???? dim rs

???? dim sql

????

???? dim keyWords

????

????keyWrods = Request("keyword")

????

???? Set rs = Server.CreateObject("ADODB.Recordset")

????sql = "select * from king_test where keyword like '%"&keyWrods&"%'"

???? rs.open sql,conn,1,1

???? if not (rs.bof and rs.eof) then

???? Response.Write("<ul>")

???? do while not rs.eof

<%...

???? rs.movenext

???? loop

???? Response.Write("<ul>")

???? end if

???? rs.close

???? set rs = nothing

???? conn.close

???? Set conn = nothing

.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