900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > html判断文本框和按钮 css样式之区分input是按钮还是文本框的方法

html判断文本框和按钮 css样式之区分input是按钮还是文本框的方法

时间:2020-03-03 18:48:35

相关推荐

html判断文本框和按钮 css样式之区分input是按钮还是文本框的方法

当你看到这个html标签的时候,你会想到什么?一个文本框?一个按钮?一个单选框?一个复选框?……对,对,对,它们都对。也许你可能想不到,这个小小的input竟然可以创造出10个不同的东西,下面是个列表,看看,哪些是你没有想到的:

文本框

密码框

提交按钮

重置按钮

单选框

复选框

普通按钮

文件选择控件

隐藏框

图片按钮

所以你可能会说,input真是一个伟大的东西,竟然这么有“搞头”,但是当你真正在项目中试图给不同的控件设置不同的样式时,你就会发现,input真的可以把“你的头搞大”。我不知道为什么当初要给input赋予那么多身份,但是,他的“N重身份”给网站设计者的确带来了不少的麻烦。好在,劳动人民是伟大的,解决问题的办法还是有滴~,虽然它们都有各自致命的缺点 Orz… 解放方法大致归纳一下,列表如下(小弟才疏,错误遗漏难免,还请各位高人指点):

1.用css的expression判断表达式

2.用css中的type选择器

3.用javascript脚本实现

4.如果你用Microsoft Visual Studio 或者后续版本开发项目,恭喜,你还可以使用skin。

下面就来讲解一下各个办法的详细实现和它们的优缺点。

1:用css的expression判断表达式

实现代码参考:

htmlpublic"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">diffInput2input{background-color:expression(this.type=="text"?'#FFC':'');}

Thisisnormaltextbox:Thisisnormalbutton:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。