css樣式之區(qū)分input是按鈕還是文本框的方法第3/4頁
更新時間：2008年09月02日 00:26:12 作者：
對設(shè)置樣式時怎么區(qū)分input是按鈕還是文本框問題的技術(shù)調(diào)查——把input里面的東西剔出來
3：用javascript腳本實現(xiàn)
實現(xiàn)參考代碼：
前臺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)點：可以分區(qū)出各個input控件形態(tài)。多種技術(shù)的混合使用，滿足“我是高手”的虛榮心。
缺點：技術(shù)牽扯面教廣，因為用js后期處理，所以在js沒有起作用之前，各個input還是原始狀態(tài)，然后突然“變帥”會讓你的頁面很奇怪。較致命的是FireFox不支持 Orz…
相關(guān)文章
網(wǎng)頁中關(guān)閉IE的圖像工具欄和XP主題
網(wǎng)頁中關(guān)閉IE的圖像工具欄和XP主題...2007-01-01
CSS的filter屬性用于給元素添加各種圖形效果,如模糊、顏色偏移等,它支持多種濾鏡函數(shù),如blur()、brightness()、contrast()等,可以單獨使用,也可以組合使用,以創(chuàng)建更復(fù)雜的效果2024-11-11
css div布局總會遇到很多瀏覽器兼容的問題。2008-04-04
編寫純 CSS 彈出菜單的原理及實現(xiàn) By shawl.qiu
編寫純 CSS 彈出菜單的原理及實現(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
一個上下左右都居中的非table的純CSS實現(xiàn)代碼2008-11-11
網(wǎng)頁設(shè)計布局基礎(chǔ)...2007-02-02
div+css布局必須要知道的css條件注釋理論及實踐...2007-05-05
CSS規(guī)則層疊的應(yīng)用 css必須要注意的幾點
前幾天，我解釋了 CSS規(guī)則層疊時的算法 雖然看起來復(fù)雜，但是在實際應(yīng)用過程中，還不算太復(fù)雜，因為諸如user style和inline style之類的東西我們很少考慮。2008-04-04