| 網(wǎng)頁制作Webjx文章簡介：那如何用css控制input中的text和radio呢？我找到了兩個解決辦法. |
在制作表單頁面的時候，如果頁面有很多表單，我就不愿意單獨定義一個input樣式 然后每個input text下都去調(diào)用這個css（<input type="text" name="textfield" class="" />）.我覺得這樣每個input引用css的做法不理想,而且也太麻煩了.我習慣定義一個總的input樣式。如input { border:1px solid #f00} ,這樣為所有的input定義了一個紅色邊框。這樣就必須在radio調(diào)用一個無紅色邊框的css 如：.radio { border:none} 把radio的紅色邊框去掉.但這樣radio的外觀就和默認情況下的相比不美觀了很多。我在做網(wǎng)站的時候就碰到這樣的問題，如圖：
沒有定義input,默認的情況下：
定義了input全局樣式的情況下 radio的外觀就難看了許多：
那如何用css控制input中的text和radio呢？網(wǎng)頁教學網(wǎng)找到了兩個解決辦法，還是以示例來說明：
方法一：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css如何控制input中的text和radio</title>
<style type="text/css">
<!--
input{behavior:url(text.htc)}
-->
</style>
</head>
<body>
<input type="text" name="textfield" />
<input type="radio" name="radiobutton" value="radiobutton" />
</body>
</html>
就是在css中調(diào)用了text.htc文件。何謂htc文件?htc的全稱就是Html Components，由微軟在IE5.0后開始提供的一種新的指令組合,它是一個JavaScript的代碼文件,主要把JavaScript代碼封裝起來。所以htc文件只在IE下有效。
在text.htc文件中寫入代碼：
<public:component>
<public:attach event="oncontentready" onevent="init()" />
<public:attach event="ondetach" onevent="on_deatch()" />
<script>
function init()
{
if(element.type=="text")
{
element.style.border="1px solid #f00"
}
}
</script>
</public:component>
ps:此方法的一個bug是在firefox下不支持。而且據(jù)說用htc比較占資源。所以不推薦使用。
方法二：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css如何控制input中的text和radio</title>
</head>
<body>
<input type="text" name="textfield" />
<input type="radio" name="radiobutton" value="radiobutton" />
</body>
</html>
<script language="javascript" type="text/javascript">
var obj = document.getElementsByTagName("input");
for (var i=0; i<obj.length; i++)
{
if (obj[i].type=="text"){obj[i].style.border="1px solid #f00" }
}
</script>
ps:就是在頁面最下面加上這端JS代碼。這個方法比較實用，也可以推薦使用，特別感謝可樂用JS的辦法來解決這個問題
