免費AI編程助手
CSS網頁input輸入框立體效果
2018-08-22 19:40 更新
開心網的交互式做的很出色，舉一個例子：
下拉的select框沒有用傳統(tǒng)的下拉式，而是用層的彈出和隱藏來代替?zhèn)鹘y(tǒng)的select下拉框，如圖：
這里不去研究它的具體實現(xiàn)方法，來探討一下input輸入框的實現(xiàn)方法，剛好在最近的項目中我也用到了此表現(xiàn)形式。
剛開始在迷茫用css是怎么實現(xiàn)的，放大來看會發(fā)現(xià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外面再添加一個span標簽，定義span的border為灰色（#979797），再把input的默認狀態(tài)的border定義為白色，鼠標點擊后定義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控制的網頁input輸入框的各種樣式
輸入框景背景透明：
<input style="background:transparent;border:1px solid #ffffff">
鼠標劃過輸入框，輸入框背景色變色：
<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">
輸入字時輸入框邊框閃爍(邊框為小方型)：
<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);">
輸入字時輸入框邊框閃爍(邊框為虛線)：
<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">
自動橫向廷伸的輸入框：
<input type="text" style="huerreson:e xpression(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 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">
================================================================
輸入框的樣式在作登陸框的時候還有需要填寫信息的時候還是很常用的，個性點的輸入框設置可以滿足你頁面的整體效果和色調的搭配，你會以為這個一個小的輸入框而破壞了整體的視覺效果，有時候可能就是細節(jié)影響成敗~
<input style="background:transparent;border:1px solid #ffffff">
鼠標劃過輸入框，輸入框背景色變色：
<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">
輸入字時輸入框邊框閃爍(邊框為小方型)：
<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);">
輸入字時輸入框邊框閃爍(邊框為虛線)：
<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">
自動橫向廷伸的輸入框：
<input type="text" style="huerreson:e xpression(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 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">
================================================================
輸入框的樣式在作登陸框的時候還有需要填寫信息的時候還是很常用的，個性點的輸入框設置可以滿足你頁面的整體效果和色調的搭配，你會以為這個一個小的輸入框而破壞了整體的視覺效果，有時候可能就是細節(jié)影響成敗~
以上內容是否對您有幫助：
更多建議：