当前位置:  编程技术>WEB前端

css样式之区分input是按钮还是文本框的方法第1/4页

    来源: 互联网  发布时间:2014-10-04

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

当你看到这个html标签的时候,你会想到什么?一个文本框?一个按钮?一个单选框?一个复选框?……对,对,对,它们都对。也许你可能想不到,这个小小的input竟然可以创造出10个不同的东西,下面是个列表,看看,哪些是你没有想到的:
文本框
密码框
提交按钮
重置按钮
单选框
复选框
普通按钮
文件选择控件
隐藏框
图片按钮
所以你可能会说,input真是一个伟大的东西,竟然这么有“搞头”,但是当你真正在项目中试图给不同的控件设置不同的样式时,你就会发现,input真的可以把“你的头搞大”。我不知道为什么当初要给input赋予那么多身份,但是,他的“N重身份”给网站设计者的确带来了不少的麻烦。好在,劳动人民是伟大的,解决问题的办法还是有滴~,虽然它们都有各自致命的缺点 Orz… 解放方法大致归纳一下,列表如下(小弟才疏,错误遗漏难免,还请各位高人指点):

1.用css的expression判断表达式
2.用css中的type选择器
3.用javascript脚本实现
4.如果你用Microsoft Visual Studio 2005 或者后续版本开发项目,恭喜,你还可以使用skin。

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

1:用css的expression判断表达式
实现代码参考:
doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


     diffInput2 
    
    
    
    
    
    input
    {
    background-color:expression(this.type=="text"?'#FFC':'');
    }
    




This is normal textbox:
This is normal button:



优点:简单,轻量级
缺点:expression判断表达式FireFox是不支持的。致命的是只能区分出一个(例如例子中就只能区分出text文本框),不要试图设置多个,下面的会将上面的覆盖掉 Orz…

    
 
 

您可能感兴趣的文章:

  • 区分IE6,IE7,firefox的CSS hack
  • 通过CSS Hack 区分 FF/IE7/IE6/IE5.5/IE5 代码推荐
  • PHP去除html标签,php标记及css样式代码参考
  • jQuery CSS()方法改变现有的CSS样式
  • Web前端开发如何利用css样式来控制Html中的h1/h2/h3标签不换行
  • jquery css方法改变css样式用法介绍
  • HTML如何使用各种CSS 样式
  • 解决ie动态修改link样式,import css不刷新的问题
  • jsp页面中插入css样式的三种方法总结
  • 批量修改标签css样式以input标签为例
  • 移动 Web 的 CSS 样式工具库 Rider
  • CSS注释、命名、继承性、样式排序等CSS技巧的小结
  • 字符不会撑大表格的常见css样式
  • asp.net不影响CSS样式的弹出对话框
  • jquery实现不同大小浏览器使用不同的css样式表的方法
  • CSS样式表规划与管理的经验总结
  • 引入CSS样式的五种方式
  • JQuery中操作Css样式的方法
  • 网页编辑中CSS样式表技巧总结
  • 详谈 CSS样式表使用:链接/嵌入
  • jQuery操作元素css样式的三种方法
  • jQuery操作元素css样式三种方法示例
  • jquery操作css样式表文件的方法详解
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • css不用图片美化按钮
  • css美化input file按钮的代码方法
  • CSS小例子(只显示下划线的文本框,像文字一样的按钮)
  • css文本框与按钮美化效果代码
  • div+css实现自适应宽度按钮
  • 用CSS实现的一张图完成的按钮效果
  • java命名空间javax.swing.text.html类css的类成员方法: css定义及介绍
  • <!--@import"css/cssset/.css-->,css/cssset/.css是什么意思?
  • java命名空间javax.swing.text.html类css的类成员方法: getattribute定义及介绍
  • CSS预处理器 Less CSS
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: font定义及介绍
  • css强制换行 css强制不换行的css方法
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: margin定义及介绍
  • CSS代码格式化 CSS Beautify
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: padding定义及介绍
  • jquery css类用法(添加、修改与删除css)
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: border定义及介绍
  • CSS 框架 Simpl.css
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: clear定义及介绍
  • CSS解析器 CSS Parser
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: height定义及介绍
  • CSS压缩器 Css Compressor
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: color定义及介绍
  • Eclipse的CSS编辑插件 CSS Editor
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: display定义及介绍
  • jQuery添加/改变/移除CSS类及判断是否已经存在CSS
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: float定义及介绍
  • CSS代码检查工具 CSS Lint


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3