css樣式之區(qū)分input是按鈕還是文本框的方法第3/4頁(yè)
更新時(shí)間：2008年09月02日 00:26:12 作者：
對(duì)設(shè)置樣式時(shí)怎么區(qū)分input是按鈕還是文本框問(wèn)題的技術(shù)調(diào)查——把input里面的東西剔出來(lái)
3：用javascript腳本實(shí)現(xiàn)
實(shí)現(xiàn)參考代碼：
前臺(tái)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>
<title> diffInput </title>
<meta name="Author" content="JustinYoung">
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<style type="text/css">
input{behavior:url('css.htc');}
</style>
</head>
<body>
<dl>
<dt>This is normal textbox:<dd><input type="text" name="">
<dt>This is password textbox:<dd><input type="password" name="">
<dt>This is submit button:<dd><input type="submit">
<dt>This is reset button:<dd><input type="reset">
<dt>This is radio:<dd><input type="radio" name="ground1"> <input type="radio" name="ground1">
<dt>This is checkbox:<dd><input type="checkbox" name="ground2"> <input type="checkbox" name="ground2">
<dt>This is normal button:<dd><input type="button" value="i'm button">
</dl>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title> diffInput </title>
<meta name="Author" content="JustinYoung">
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<style type="text/css">
input{behavior:url('css.htc');}
</style>
</head>
<body>
<dl>
<dt>This is normal textbox:<dd><input type="text" name="">
<dt>This is password textbox:<dd><input type="password" name="">
<dt>This is submit button:<dd><input type="submit">
<dt>This is reset button:<dd><input type="reset">
<dt>This is radio:<dd><input type="radio" name="ground1"> <input type="radio" name="ground1">
<dt>This is checkbox:<dd><input type="checkbox" name="ground2"> <input type="checkbox" name="ground2">
<dt>This is normal button:<dd><input type="button" value="i'm button">
</dl>
</body>
</html>
Css.htc代碼：
<script language=javascript>
switch(type)
{
case 'text':
style.backgroundColor="red";
break;
case 'password':
style.backgroundImage="url(BG.gif)";
break;
case 'submit':
style.backgroundColor="blue";
style.color="white";
break;
case 'reset':
style.backgroundColor="navy";
style.color="white";
break;
case 'radio':
style.backgroundColor="hotpink";
break;
case 'checkbox':
style.backgroundColor="green";
break;
case 'button':
style.backgroundColor="lightblue";
break;
default: ;//others use default style.
}
</script>
switch(type)
{
case 'text':
style.backgroundColor="red";
break;
case 'password':
style.backgroundImage="url(BG.gif)";
break;
case 'submit':
style.backgroundColor="blue";
style.color="white";
break;
case 'reset':
style.backgroundColor="navy";
style.color="white";
break;
case 'radio':
style.backgroundColor="hotpink";
break;
case 'checkbox':
style.backgroundColor="green";
break;
case 'button':
style.backgroundColor="lightblue";
break;
default: ;//others use default style.
}
</script>
優(yōu)點(diǎn)：可以分區(qū)出各個(gè)input控件形態(tài)。多種技術(shù)的混合使用，滿足“我是高手”的虛榮心。
缺點(diǎn)：技術(shù)牽扯面教廣，因?yàn)橛胘s后期處理，所以在js沒(méi)有起作用之前，各個(gè)input還是原始狀態(tài)，然后突然“變帥”會(huì)讓你的頁(yè)面很奇怪。較致命的是FireFox不支持 Orz…
相關(guān)文章
網(wǎng)頁(yè)中關(guān)閉IE的圖像工具欄和XP主題
網(wǎng)頁(yè)中關(guān)閉IE的圖像工具欄和XP主題...2007-01-01
CSS的filter屬性用于給元素添加各種圖形效果,如模糊、顏色偏移等,它支持多種濾鏡函數(shù),如blur()、brightness()、contrast()等,可以單獨(dú)使用,也可以組合使用,以創(chuàng)建更復(fù)雜的效果2024-11-11
css div布局總會(huì)遇到很多瀏覽器兼容的問(wèn)題。2008-04-04
編寫純 CSS 彈出菜單的原理及實(shí)現(xiàn) By shawl.qiu
編寫純 CSS 彈出菜單的原理及實(shí)現(xiàn) By shawl.qiu...2007-03-03
html小技巧之td,div標(biāo)簽里內(nèi)容不換行
這篇文章主要介紹了td,div標(biāo)簽里內(nèi)容不換行的方法,需要的朋友可以參考下2014-05-05
CHM集錦(CHM)...2006-11-11
一個(gè)上下左右都居中的非table的純CSS實(shí)現(xiàn)代碼2008-11-11
網(wǎng)頁(yè)設(shè)計(jì)布局基礎(chǔ)
網(wǎng)頁(yè)設(shè)計(jì)布局基礎(chǔ)...2007-02-02
div+css布局必須要知道的css條件注釋理論及實(shí)踐
div+css布局必須要知道的css條件注釋理論及實(shí)踐...2007-05-05
CSS規(guī)則層疊的應(yīng)用 css必須要注意的幾點(diǎn)
前幾天，我解釋了 CSS規(guī)則層疊時(shí)的算法 雖然看起來(lái)復(fù)雜，但是在實(shí)際應(yīng)用過(guò)程中，還不算太復(fù)雜，因?yàn)橹T如user style和inline style之類的東西我們很少考慮。2008-04-04