脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → CSS/HTML → 经验交流 → input 按钮 文本框

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

 更新时间：2008年09月02日 00:26:12   作者：  
对设置样式时怎么区分input是按钮还是文本框问题的技术调查——把input里面的东西剔出来

3：用javascript脚本实现
实现参考代码：
前台html代码：
<!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> diffInput </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{behavior:url('css.htc');}
    </style>
</head>

<body>
<dl>
<dt>This is normal textbox:<dd><input type="text" name="">
<dt>This is password textbox:<dd><input type="password" name="">
<dt>This is submit button:<dd><input type="submit">
<dt>This is reset button:<dd><input type="reset">
<dt>This is radio:<dd><input type="radio" name="ground1"> <input type="radio" name="ground1">
<dt>This is checkbox:<dd><input type="checkbox" name="ground2"> <input type="checkbox" name="ground2">
<dt>This is normal button:<dd><input type="button" value="i'm button">
</dl>
</body>
</html>

Css.htc代码：
<script language=javascript>
switch(type)
{
    case 'text':
    style.backgroundColor="red";
    break;

    case 'password': 
    style.backgroundImage="url(BG.gif)";
    break;

    case 'submit':
    style.backgroundColor="blue";
    style.color="white";
    break;

    case 'reset':
    style.backgroundColor="navy";
    style.color="white";
    break;

    case 'radio': 
    style.backgroundColor="hotpink";
    break;

    case 'checkbox': 
    style.backgroundColor="green";
    break;

    case 'button':
    style.backgroundColor="lightblue";
    break;

    default: ;//others use default style.
}
</script>

优点：可以分区出各个input控件形态。多种技术的混合使用，满足“我是高手”的虚荣心。
缺点：技术牵扯面教广，因为用js后期处理，所以在js没有起作用之前，各个input还是原始状态，然后突然“变帅”会让你的页面很奇怪。较致命的是FireFox不支持 Orz…
上一页1234下一页阅读全文

相关文章

最新评论