CSS定义input的type类型样式

时间：2025-01-20 10:43:39

 

  2. input { width:expression(=="text"?"200px":"style"); }    

  3. input[type="text"] { width:200px }   

通常定义CSS时,书写input 规定宽度,可以使收集数据的页面显得非常整齐.

但如果表单内包含checkbox时,就需要为它单独定义一个样式,把class="name"与checkbox捆绑,非常麻烦.

有没有一种写法,可以分别定义全站input分别对应type="text",type="submit",type="chekbox"….等等的样式呢?

我看苏沈小雨的样式手册有"INPUT type=buttonINPUT type=fileINPUT type=passwordINPUT type=resetINPUT type=submitINPUT type=text"的应用单,但具体怎么用似乎没说.

有知道的好心人,指导一下吧:)

查到这个写法:input[type=text] ,Firefox有效,但IE不支持,对么?

  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/"><br />     

  3. <html xmlns="http:///1999/xhtml"><br />     

  4. <head><br />     

  5. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> </p>     

  6. <style type="text/css">      

  7. <!– INPUT{ border: 1px solid #D4D0C8; width: 200px; } input[type=text] { background-color: #FFCC33; } input[type=checkbox],input[type=radio] { width: 20px;border: 0px; } –>      

  8. </style>     

  9. <p></head><br />     

  10. <body> </p>     

  11. <form  name="form1" method="post" action="">     

  12. <input type="text" name="textfield" />     

  13. <input name="radiobutton" type="radio" value="radiobutton" />     

  14. <input type="checkbox" name="checkbox" value="checkbox" />     

  15. </form>     

  16. <p></body><br />     

  17. </html>   

 

提示：您可以先修改部分代码再运行

你是说对应type定义CSS？ 这个属性选择符目前IE不支持

<style type="text/css"> input { border:expression(=="text"?"1px solid red":"style"); } input[type="text"] { border:1px solid red; } </style> <input type="text" /> <input type="password" />

提示：您可以先修改部分代码再运行

我是想知道,怎么定义input的样式表,才能让下面这两个东东的宽度等于20px?

<input type="radio" />

<input type="checkbox"  />

而input的其它type比如<input type="text" />的宽度为200px?

当然,下面的写法IE和FF都是支持的,但我嫌它麻烦,想找全局都支持,不需要再特意指定Input样式的办法:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/">

<html xmlns="http:///1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>Untitled Document</title>

<style type="text/css">

<!–

INPUT{ border: 1px solid #D4D0C8; width: 200px; }

{ background-color: #FFCC33; }

{ width: 20px;border: 0px; }

–>

</style>

</head>

<body>

<form name="form1" method="post" action="">

<input type="text" class="long"/>

<input type="radio" class="short" />

<input type="checkbox" class="short" />

</form>

</body>

</html>

提示：您可以先修改部分代码再运行

<style type="text/css">

input { width:20px }

input { width:expression(=="text"?"200px":"style"); }

input[type="text"] { width:200px }

</style>

<input type="radio" />

<input type="checkbox" />

<input type="text" />

提示：您可以先修改部分代码再运行

再问问:)

input {

width:expression(=="checkbox"?"20px":"style");

width:expression(=="radio"?"20px":"style");

}

这两行有没有办法合成一行写?:)

找到了,呵呵.

input {

width: expression((=="checkbox" || =="radio") ?"20px":"style");

}

input的CSS样式,有没有分别对应type=text,submit,chekbox…的写法? 之 behavior

cssfile:

input {

behavior: url();

}

htcfile:

<PUBLIC:COMPONENT lightWeight=true>

<PUBLIC:ATTACH EVENT="oncontentready" ONEVENT="load()" />

<PUBLIC:ATTACH EVENT="onmouseout"  ONEVENT="mouseout()" />

<PUBLIC:ATTACH EVENT="onmouseover"  ONEVENT="mousemove()" />

<PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="mousedown()" />

<PUBLIC:ATTACH EVENT="onmouseup" ONEVENT="mouseup()" />

<PUBLIC:PROPERTY NAME="direction" />

<SCRIPT LANGUAGE="JScript">

function load()

{

if (( == ‘INPUT’ && ( == ‘button’ || == ’submit’ || == ‘reset’)) || ( == ‘BUTTON’))

{

['background'] = ‘….’;

}

= ((==’checkbox’||==’radio’)?’none’:’1px double #888888′);

}

function setImage(sImg)

{

if (bSet)

{

//['background'] = ‘URL(’+ sImg +’)’;

}

}

function mouseout() { setImage(aNormal[iDir]); try{=0.8;=80;}catch(e){}}

function mousemove() { setImage(aOver[iDir]); try{=1;=100;}catch(e){}}

function mousedown() { setImage(aClick[iDir]); }

function mouseup() { setImage(aNormal[iDir]); }

</SCRIPT>

</PUBLIC:COMPONENT>

相关文章