国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

打開APP
userphoto
未登錄

開通VIP,暢享免費(fèi)電子書等14項(xiàng)超值服

開通VIP
如何用css控制input中的text和radio

如何用css控制input中的text和radio

 

網(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)題

本站僅提供存儲(chǔ)服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊舉報(bào)。
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
JQuery判斷radio是否選中,獲取選中值
prototype.js radio checkbox用法
怎么用jquery定位一個(gè)div在某個(gè)input附近
jquery與正則表達(dá)式的應(yīng)用
JQuery 學(xué)習(xí)總結(jié)及實(shí)例
css樣式之區(qū)分input是按鈕還是文本框的方法
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長(zhǎng)圖 關(guān)注 下載文章
綁定賬號(hào)成功
后續(xù)可登錄賬號(hào)暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點(diǎn)擊這里聯(lián)系客服!

聯(lián)系客服