经典论坛 › 论坛 › 网站开发区 › HTML5及WEB标准化专栏 › input的CSS样式,有没有分别对应type=text,submit,chekbo ...

查看: 46146|回复: 10

[讨论] input的CSS样式,有没有分别对应type=text,submit,chekbox...的写法? [复制链接]

hutuu　楼主

高级会员

帖子: 194
体力: 908
威望: 0

发表于 2006-9-19 15:45:46 |显示全部楼层

通常定义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"的应用单,但具体怎么用似乎没说.

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

…

西部数码顶级域名注册商39元抢注！

使用道具举报

hutuu　楼主

高级会员

帖子: 194
体力: 908
威望: 0

发表于 2006-9-19 16:02:51 |显示全部楼层

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

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

出处:http://cf-bill.blogspot.com/2005 ... petext-webpage.html

…

租服务器，上51IDC | [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具举报

snwebsite　

蓝色怪兽

荣誉管理

帖子: 4347
体力: 14380
威望: 69
居住地: 香港特别行政区湾仔区

发表于 2006-9-19 16:12:22 |显示全部楼层

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

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

[ 本帖最后由 snwebsite 于 2006-9-19 16:15 编辑 ]

使用道具举报

hutuu　楼主

高级会员

帖子: 194
体力: 908
威望: 0

发表于 2006-9-19 16:23:44 |显示全部楼层

谢谢回复:)

我是想知道,怎么定义input的样式表,才能让下面这两个东东的宽度等于20px?
<input type="radio" />
<input type="checkbox" />

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

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

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

[ 本帖最后由 hutuu 于 2006-9-19 16:32 编辑 ]

…

使用道具举报

snwebsite　

蓝色怪兽

荣誉管理

帖子: 4347
体力: 14380
威望: 69
居住地: 香港特别行政区湾仔区

发表于 2006-9-19 16:27:35 |显示全部楼层

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

使用道具举报

hutuu　楼主

高级会员

帖子: 194
体力: 908
威望: 0

发表于 2006-9-19 16:30:43 |显示全部楼层

谢谢

…

使用道具举报

hutuu　楼主

高级会员

帖子: 194
体力: 908
威望: 0

发表于 2006-9-19 16:44:42 |显示全部楼层

再问问:)

input {
width:expression(this.type=="checkbox"?"20px":"style");
width:expression(this.type=="radio"?"20px":"style");
}

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

…

使用道具举报

hutuu　楼主

高级会员

帖子: 194
体力: 908
威望: 0

发表于 2006-9-19 17:07:53 |显示全部楼层

找到了,呵呵.

input {
width: expression((this.type=="checkbox" || this.type=="radio") ?"20px":"style");
}

…

使用道具举报

cqmark　

新手上路

帖子: 3
体力: 11
威望: 0

发表于 2008-5-21 21:47:46 |显示全部楼层

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

cssfile:
input {
behavior: url(bindbutton.htc);
   }

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 ((element.tagName == 'INPUT' && (element.type == 'button' || element.type == 'submit' || element.type == 'reset')) || (element.tagName == 'BUTTON'))
{
element.style['background'] = '....';
}
element.style.border = ((element.type=='checkbox'||element.type=='radio')?'none':'1px double #888888');
}

function setImage(sImg)
{
if (bSet)
{
//element.style['background'] = 'URL('+ sImg +')';
}
}

function mouseout() { setImage(aNormal[iDir]); try{element.style.MozOpacity=0.8;element.filters.alpha.opacity=80;}catch(e){}}
function mousemove() { setImage(aOver[iDir]); try{element.style.MozOpacity=1;element.filters.alpha.opacity=100;}catch(e){}}
function mousedown() { setImage(aClick[iDir]); }
function mouseup() { setImage(aNormal[iDir]); }

</SCRIPT>
</PUBLIC:COMPONENT>

IMK.MARK

使用道具举报

biyibird　

嘟大侠

高级会员

帖子: 409
体力: 693
威望: 1

发表于 2008-5-22 09:06:59 |显示全部楼层

楼上东西非常有用！收藏了！

长沙网站建设，QQ258754，www.contactu.net

使用道具举报

eling27　

高级会员

帖子: 338
体力: 1264
威望: 0

发表于 2009-3-23 13:10:51 |显示全部楼层

input {
border:expression(this.type=="text"?"1px solid red":"style");

为什么我用了expression后，加申明就会CSS无效，不加是正确的

<!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">

卖山核桃的，http://shop33992838.taobao.com/

使用道具举报

返回列表

Archiver|手机版|安久科技提供CDN|blueidea.com ( 京ICP备05002321号 )

GMT+8, 2012-2-13 10:14 , Processed in 0.132336 second(s), 8 queries , Gzip On, Memcache On.

Powered by Discuz! X2

		自动登录	找回密码
密码			注册

[讨论] input的CSS样式,有没有分别对应type=text,submit,chekbox...的写法? [复制链接]

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

浏览过的帖子

浏览过的版块