免費(fèi)AI編程助手
CSS網(wǎng)頁(yè)input輸入框立體效果
2018-08-22 19:40 更新
開(kāi)心網(wǎng)的交互式做的很出色，舉一個(gè)例子：
下拉的select框沒(méi)有用傳統(tǒng)的下拉式，而是用層的彈出和隱藏來(lái)代替?zhèn)鹘y(tǒng)的select下拉框，如圖：
這里不去研究它的具體實(shí)現(xiàn)方法，來(lái)探討一下input輸入框的實(shí)現(xiàn)方法，剛好在最近的項(xiàng)目中我也用到了此表現(xiàn)形式。
剛開(kāi)始在迷茫用css是怎么實(shí)現(xiàn)的，放大來(lái)看會(huì)發(fā)現(xiàn)其實(shí)很簡(jiǎn)單：
代碼：
<!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>input輸入框研究</title>
<style type="text/css">
<!--
.it_s { display:table; border:1px solid #979797}
.it1,.it2 { border:1px solid #fff; background:#fff none repeat scroll 0 0}
.it1 { border:1px solid #fff;}
.it2 { border-left:1px solid #000; border-top:1px solid #000}
-->
</style>
</head>
<body>
<span class="it_s"><input type="text" name="textfield" onblur="this.className='it1';" onfocus="this.className='it2';" class="it1" size="25"/></span>
</body>
</html>
用firebug查看源代碼，發(fā)現(xiàn)，在input外面再添加一個(gè)span標(biāo)簽，定義span的border為灰色（#979797），再把input的默認(rèn)狀態(tài)的border定義為白色，鼠標(biāo)點(diǎn)擊后定義border-left和border-right為黑色（border-left:1px solid #000; border-top:1px solid #000}）。
代碼：
<!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>input輸入框研究</title>
<style type="text/css">
<!--
.it_s { display:table; border:1px solid #979797}
.it1,.it2 { border:1px solid #fff; background:#fff none repeat scroll 0 0}
.it1 { border:1px solid #fff;}
.it2 { border-left:1px solid #000; border-top:1px solid #000}
-->
</style>
</head>
<body>
<span class="it_s"><input type="text" name="textfield" onblur="this.className='it1';" onfocus="this.className='it2';" class="it1" size="25"/></span>
</body>
</html>
CSS控制的網(wǎng)頁(yè)input輸入框的各種樣式
輸入框景背景透明：
<input style="background:transparent;border:1px solid #ffffff">
鼠標(biāo)劃過(guò)輸入框，輸入框背景色變色：
<INPUT value="Type here" NAME="user_pass" TYPE="text" SIZE="29" onmouseover="this.style.borderColor='black';this.style.backgroundColor='plum'"
style="width: 106; height: 21"
onmouseout="this.style.borderColor='black';this.style.backgroundColor='#ffffff'" style="border-width:1px;border-color=black">
輸入字時(shí)輸入框邊框閃爍(邊框?yàn)樾》叫?：
<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" onfocus="borderColor(this);" onblur="clearTimeout(oTime);">
輸入字時(shí)輸入框邊框閃爍(邊框?yàn)樘摼€)：
<style>
#oText{border:1px dotted #ff0000;ryo:e xpression(onfocus=function light (){with(document.all.oText){style.borderColor=(style.borderColor=="#ffee00"?"#ff0000":"#ffee00");timer=setTimeout(light,500);}},onblur=function(){this.style.borderColor="#ff0000";clearTimeout(timer)})};
</style>
<input type="text" id="oText">
自動(dòng)橫向廷伸的輸入框：
<input type="text" style="huerreson:e xpression(this.width=this.scrollWidth)" value="abcdefghijk">
自動(dòng)向下廷伸的文本框：
<textarea name="content" rows="6" cols="80" onpropertychange="if(this.scrollHeight>80) this.style.posHeight=this.scrollHeight+5">輸入幾個(gè)回車(chē)試試</textarea>
只有下劃線的文本框：
<input style="border:0;border-bottom:1 solid black;background:;">
軟件序列號(hào)式的輸入框：
<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">
軟件序列號(hào)式的輸入框(完整版)：
<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">
================================================================
輸入框的樣式在作登陸框的時(shí)候還有需要填寫(xiě)信息的時(shí)候還是很常用的，個(gè)性點(diǎn)的輸入框設(shè)置可以滿(mǎn)足你頁(yè)面的整體效果和色調(diào)的搭配，你會(huì)以為這個(gè)一個(gè)小的輸入框而破壞了整體的視覺(jué)效果，有時(shí)候可能就是細(xì)節(jié)影響成敗~
<input style="background:transparent;border:1px solid #ffffff">
鼠標(biāo)劃過(guò)輸入框，輸入框背景色變色：
<INPUT value="Type here" NAME="user_pass" TYPE="text" SIZE="29" onmouseover="this.style.borderColor='black';this.style.backgroundColor='plum'"
style="width: 106; height: 21"
onmouseout="this.style.borderColor='black';this.style.backgroundColor='#ffffff'" style="border-width:1px;border-color=black">
輸入字時(shí)輸入框邊框閃爍(邊框?yàn)樾》叫?：
<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" onfocus="borderColor(this);" onblur="clearTimeout(oTime);">
輸入字時(shí)輸入框邊框閃爍(邊框?yàn)樘摼€)：
<style>
#oText{border:1px dotted #ff0000;ryo:e xpression(onfocus=function light (){with(document.all.oText){style.borderColor=(style.borderColor=="#ffee00"?"#ff0000":"#ffee00");timer=setTimeout(light,500);}},onblur=function(){this.style.borderColor="#ff0000";clearTimeout(timer)})};
</style>
<input type="text" id="oText">
自動(dòng)橫向廷伸的輸入框：
<input type="text" style="huerreson:e xpression(this.width=this.scrollWidth)" value="abcdefghijk">
自動(dòng)向下廷伸的文本框：
<textarea name="content" rows="6" cols="80" onpropertychange="if(this.scrollHeight>80) this.style.posHeight=this.scrollHeight+5">輸入幾個(gè)回車(chē)試試</textarea>
只有下劃線的文本框：
<input style="border:0;border-bottom:1 solid black;background:;">
軟件序列號(hào)式的輸入框：
<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">
軟件序列號(hào)式的輸入框(完整版)：
<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">
================================================================
輸入框的樣式在作登陸框的時(shí)候還有需要填寫(xiě)信息的時(shí)候還是很常用的，個(gè)性點(diǎn)的輸入框設(shè)置可以滿(mǎn)足你頁(yè)面的整體效果和色調(diào)的搭配，你會(huì)以為這個(gè)一個(gè)小的輸入框而破壞了整體的視覺(jué)效果，有時(shí)候可能就是細(xì)節(jié)影響成敗~
以上內(nèi)容是否對(duì)您有幫助：
更多建議：