css樣式之區(qū)分input是按鈕還是文本框的方法第2/4頁
更新時間：2008年09月02日 00:26:12 作者：
對設置樣式時怎么區(qū)分input是按鈕還是文本框問題的技術調查——把input里面的東西剔出來
2：用css中的type選擇器
實現(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>
<title> diffInput2 </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[type="text"]
{
background-color:#FFC;
}
input[type="password"]
{
background-image:url(BG.gif);
}
input[type="submit"]
{
background-color:blue;
color:white;
}
input[type="reset"]
{
background-color:navy;
color:white;
}
input[type="radio"]
{
/*In FF,Some radio style like background-color not been supported*/
margin:10px;
}
input[type="checkbox"]
{
/*In FF,Some checkbox style like background-color not been supported*/
margin:10px;
}
input[type="button"]
{
background-color:lightblue;
}
</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> diffInput2 </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[type="text"]
{
background-color:#FFC;
}
input[type="password"]
{
background-image:url(BG.gif);
}
input[type="submit"]
{
background-color:blue;
color:white;
}
input[type="reset"]
{
background-color:navy;
color:white;
}
input[type="radio"]
{
/*In FF,Some radio style like background-color not been supported*/
margin:10px;
}
input[type="checkbox"]
{
/*In FF,Some checkbox style like background-color not been supported*/
margin:10px;
}
input[type="button"]
{
background-color:lightblue;
}
</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>
優(yōu)點：簡單，明了，可以分區(qū)出各個input控件形態(tài)。
缺點：type選擇器，IE6之前的對web標準支持的不太好的瀏覽器不能支持（致命呀 Orz…）
相關文章
網(wǎng)頁中關閉IE的圖像工具欄和XP主題...2007-01-01
CSS的filter屬性用于給元素添加各種圖形效果,如模糊、顏色偏移等,它支持多種濾鏡函數(shù),如blur()、brightness()、contrast()等,可以單獨使用,也可以組合使用,以創(chuàng)建更復雜的效果2024-11-11
css div布局總會遇到很多瀏覽器兼容的問題。2008-04-04
編寫純 CSS 彈出菜單的原理及實現(xiàn) By shawl.qiu
編寫純 CSS 彈出菜單的原理及實現(xiàn) By shawl.qiu...2007-03-03
這篇文章主要介紹了td,div標簽里內(nèi)容不換行的方法,需要的朋友可以參考下2014-05-05
CHM集錦(CHM)...2006-11-11
一個上下左右都居中的非table的純CSS實現(xiàn)代碼2008-11-11
網(wǎng)頁設計布局基礎...2007-02-02
div+css布局必須要知道的css條件注釋理論及實踐...2007-05-05
前幾天，我解釋了 CSS規(guī)則層疊時的算法 雖然看起來復雜，但是在實際應用過程中，還不算太復雜，因為諸如user style和inline style之類的東西我們很少考慮。2008-04-04