• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    css样式之区分input是按钮还是文本框的方法第1/4页
    当你看到input>这个html标签的时候,你会想到什么?一个文本框?一个按钮?一个单选框?一个复选框?……对,对,对,它们都对。也许你可能想不到,这个小小的input竟然可以创造出10个不同的东西,下面是个列表,看看,哪些是你没有想到的:
    input type="text" /> 文本框
    input type="password" /> 密码框
    input type="submit" /> 提交按钮
    input type="reset" /> 重置按钮
    input type="radio" /> 单选框
    input type="checkbox" /> 复选框
    input type="button" /> 普通按钮
    input type="file" /> 文件选择控件
    input type="hidden" /> 隐藏框
    input type="image" /> 图片按钮
    所以你可能会说,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">
    html xmlns="http://www.w3.org/1999/xhtml" >
    head>
        
    title> diffInput2 /title>
        
    meta name="Author" content="JustinYoung"/>
        
    meta name="Keywords" content=""/>
        
    meta name="Description" content=""/>
        
    meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        
    style type="text/css">
        input
        
    {
        background-color
    :expression(this.type=="text"?'#FFC':'');
        
    }
        
    /style>
    /head>

    body>
    dl>
    dt>This is normal textbox:dd>input type="text" name="">
    dt>This is normal button:dd>input type="button" value="i'm button">
    /dl>
    /body>
    /html>

    优点:简单,轻量级
    缺点:expression判断表达式FireFox是不支持的。致命的是只能区分出一个(例如例子中就只能区分出text文本框),不要试图设置多个,下面的会将上面的覆盖掉 Orz…
    1234下一页阅读全文
    上一篇:层盖住下拉列表框问题解决方案
    下一篇:CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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