| 網(wǎng)頁(yè)制作Webjx文章簡(jiǎn)介：那如何用css控制input中的text和radio呢？我找到了兩個(gè)解決辦法. |
在制作表單頁(yè)面的時(shí)候，如果頁(yè)面有很多表單，我就不愿意單獨(dú)定義一個(gè)input樣式 然后每個(gè)input text下都去調(diào)用這個(gè)css（<input type="text" name="textfield" class="" />）.我覺(jué)得這樣每個(gè)input引用css的做法不理想,而且也太麻煩了.我習(xí)慣定義一個(gè)總的input樣式。如input { border:1px solid #f00} ,這樣為所有的input定義了一個(gè)紅色邊框。這樣就必須在radio調(diào)用一個(gè)無(wú)紅色邊框的css 如：.radio { border:none} 把radio的紅色邊框去掉.但這樣radio的外觀就和默認(rèn)情況下的相比不美觀了很多。我在做網(wǎng)站的時(shí)候就碰到這樣的問(wèn)題，如圖：
沒(méi)有定義input,默認(rèn)的情況下：
定義了input全局樣式的情況下 radio的外觀就難看了許多：
那如何用css控制input中的text和radio呢？網(wǎng)頁(yè)教學(xué)網(wǎng)找到了兩個(gè)解決辦法，還是以示例來(lái)說(shuō)明：
方法一：
<!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>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后開始提供的一種新的指令組合,它是一個(gè)JavaScript的代碼文件,主要把JavaScript代碼封裝起來(lái)。所以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:此方法的一個(gè)bug是在firefox下不支持。而且據(jù)說(shuō)用htc比較占資源。所以不推薦使用。
方法二：
<!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>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:就是在頁(yè)面最下面加上這端JS代碼。這個(gè)方法比較實(shí)用，也可以推薦使用，特別感謝可樂(lè)用JS的辦法來(lái)解決這個(gè)問(wèn)題
聯(lián)系客服
