首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

css样式之区分input是按钮还是文本框的方法_经验交流

作者：张光和尚山秀珍 | 来源：互联网 | 2017-05-12 01:42
对设置样式时怎么区分input是按钮还是文本框问题的技术调查——把input里面的东西剔出来
对设置样式时怎么区分input是按钮还是文本框问题的技术调查——把input里面的东西剔出来

当你看到这个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">
<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"?&＃39;#FFC&＃39;:&＃39;&＃39;);
}
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&＃39;m button">
dl>
body>
html>


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

2：用css中的type选择器
实现参考代码：

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[type="text"]
{
background-color:#FFC;
}

input[type="password"]
{
background-image:url(BG.gif);
}

input[type="submit"]
{
background-color:blue;
color:white;
}

input[type="reset"]
{
background-color:navy;
color:white;
}

input[type="radio"]
{
/*In FF,Some radio style like background-color not been supported*/
margin:10px;
}

input[type="checkbox"]
{
/*In FF,Some checkbox style like background-color not been supported*/
margin:10px;
}

input[type="button"]
{
background-color:lightblue;
}
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&＃39;m button">
dl>
body>
html>


优点：简单，明了，可以分区出各个input控件形态。
缺点：type选择器，IE6之前的对web标准支持的不太好的浏览器不能支持（致命呀 Orz…）

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(&＃39;css.htc&＃39;);}
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&＃39;m button">
dl>
body>
html>


Css.htc代码：

<script language=Javascript>
switch(type)
{
case &＃39;text&＃39;:
style.backgroundColor="red";
break;

case &＃39;password&＃39;:
style.backgroundImage="url(BG.gif)";
break;

case &＃39;submit&＃39;:
style.backgroundColor="blue";
style.color="white";
break;

case &＃39;reset&＃39;:
style.backgroundColor="navy";
style.color="white";
break;

case &＃39;radio&＃39;:
style.backgroundColor="hotpink";
break;

case &＃39;checkbox&＃39;:
style.backgroundColor="green";
break;

case &＃39;button&＃39;:
style.backgroundColor="lightblue";
break;

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


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

4：Microsoft Visual Studio 2005中使用skin。
Skin文件参考代码：

<%--Style for common TextBox--%>
<asp:TextBox runat="server" style="background-color:#FFC ">asp:TextBox>
<asp:Button runat="server" style=”background-color:red”>asp:Button>


注意里面的样式是用style加上的，而不是用cssClass，道理很简单，如果用cssClass，前面的再用cssClass就会覆盖这个cssClass。导致失败。当然，skin不能单独使用，还要配合css样式表。

优点：可以分区出各个控件形态（注意：skin只能对服务器端控件使用，所以现在已经不是单纯的input标签了，虽然这些服务器端控件“打到”前台的时候仍然是input控件）。除了css，又被分离一层，使得样式的设置能有更好的定制性。其他优点（参考skin的优点）。
缺点：只能对服务器端控件使用。不是所有的项目都能使用skin功能 Orz…


总结：上面的方法，都是有各自的优点和缺点，所以单独的使用任何一个都不能很好的解决问题。所以应该将多个方法配合一起使用，这样才能较好的解决问题。但是多个方法配合使用就是完美的了吗？NO～！它也有致命的缺点——多套方案的维护需要更大的成本！

后记：这是一个以IE6为首，非web标准浏览器横扫天下的乱世年代，不知有多少网页初学者惨死在IE6的诡异解析模式之下，又有多少程序员被IE6所奴役，还有无数web设计者在IE6的胯下忍辱偷生。虽然黑暗中我们欣慰的看到FireFox反对暴统的勇者的出现，以及IE7对Web标准越来越好的支持这道曙光。但是黑夜仍旧将会持续很长一段时间。对于web标准一统天下的年代，我们既喜且悲。喜的是，到那个时候，我们做网页设计和规划将会如同吃饭般简单，悲的是：如果真的到了那个时候，我们吃饭的饭碗还能那么重吗？不过，为了人类社会的进步，拯救地球的科技，发展宇宙的技术文化 -_-b… 我依然期待web标准一统天下的到来。


keyword:自动区分各类不同的input样式,在CSS中如何区分和,利用Javascript来实现自动区分各类不同的input样式,input,input type,input type file,input type hidden,input file,input.dll,html input,input type image

推荐阅读
  • jsp

    java web之jsp初学习

    JavaWeb介绍概念JavaWeb，是用Java技术来解决相关web互联网领域的技术总和。web包括：web服务器和web客户端两部分。Java在客户端的应用有javaapplet，不过使 ... [详细]
  • javascript

    简单的ajax与struts2实例

    前言对于从事技术的人员来说ajax是这好东西，都会使用，而且乐于使用。但对于新手，开发一个ajax实例，还有是难度的，必竟对于他们这是新东西。leo开发一个简单的ajax实例,用的是 ... [详细]
  • schema

    Alink回归预测的不完善问题及期待

    本文讨论了Alink回归预测的不完善问题，指出目前主要针对Python做案例，对其他语言支持不足。同时介绍了pom.xml文件的基本结构和使用方法，以及Maven的相关知识。最后，对Alink回归预测的未来发展提出了期待。 ... [详细]
  • import

    OC学习笔记之@property和@synthesize

    本文介绍了OC学习笔记中的@property和@synthesize，包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]
  • jsp

    Hibernate基础映射

    在说Hibernate映射前，我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象，以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]
  • jsp

    SpringBoot集成前端模版（thymeleaf）的配置步骤

    本文介绍了在SpringBoot中集成thymeleaf前端模版的配置步骤，包括在application.properties配置文件中添加thymeleaf的配置信息，引入thymeleaf的jar包，以及创建PageController并添加index方法。 ... [详细]
  • jsp

    Voicewo在线语音识别转换jQuery插件的特点和示例

    Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件，该插件具有快速、架构、风格、扩展和兼容等特点，适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • client

    ABAP开发发送邮件程序的配置和代码整理

    本文介绍了通过ABAP开发往外网发邮件的需求，并提供了配置和代码整理的资料。其中包括了配置SAP邮件服务器的步骤和ABAP写发送邮件代码的过程。通过RZ10配置参数和icm/server_port_1的设定，可以实现向Sap User和外部邮件发送邮件的功能。希望对需要的开发人员有帮助。摘要长度：184字。 ... [详细]
  • jsp

    Java验证码——kaptcha的使用配置及样式

    Java验证码——kaptcha的使用配置及样式
    本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置，包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]
  • install

    使用cacti监控mssql 2005运行资源情况的操作步骤

    本文介绍了使用cacti监控mssql 2005运行资源情况的操作步骤，包括安装必要的工具和驱动，测试mssql的连接，配置监控脚本等。通过php连接mssql来获取SQL 2005性能计算器的值，实现对mssql的监控。详细的操作步骤和代码请参考附件。 ... [详细]
  • install

    iOS超签签名服务器搭建及其优劣势

    iOS超签签名服务器搭建及其优劣势
    本文介绍了搭建iOS超签签名服务器的原因和优势，包括不掉签、用户可以直接安装不需要信任、体验好等。同时也提到了超签的劣势，即一个证书只能安装100个，成本较高。文章还详细介绍了超签的实现原理，包括用户请求服务器安装mobileconfig文件、服务器调用苹果接口添加udid等步骤。最后，还提到了生成mobileconfig文件和导出AppleWorldwideDeveloperRelationsCertificationAuthority证书的方法。 ... [详细]
  • install

    Apache Shiro 身份验证绕过漏洞 (CVE202011989) 详细解析及防范措施

    Apache Shiro 身份验证绕过漏洞 (CVE202011989) 详细解析及防范措施
    本文详细解析了Apache Shiro 身份验证绕过漏洞 (CVE202011989) 的原理和影响，并提供了相应的防范措施。Apache Shiro 是一个强大且易用的Java安全框架，常用于执行身份验证、授权、密码和会话管理。在Apache Shiro 1.5.3之前的版本中，与Spring控制器一起使用时，存在特制请求可能导致身份验证绕过的漏洞。本文还介绍了该漏洞的具体细节，并给出了防范该漏洞的建议措施。 ... [详细]
  • javascript

    常用的CSS属性及用法整理

    本文整理了常用的CSS属性及用法，包括背景属性、边框属性、尺寸属性、可伸缩框属性、字体属性和文本属性等，方便开发者查阅和使用。 ... [详细]
  • javascript

    CSS |网格行结束属性

    CSS|网格-行-结束属性原文:https://www.gee ... [详细]
  • javascript

    css元素可拖动,如何使用CSS禁止元素拖拽？

    css元素可拖动,如何使用CSS禁止元素拖拽？
    一、用户行为三剑客以下3个CSS属性：user-select属性可以设置是否允许用户选择页面中的图文内容；user-modify属性可以设置是否允许输入 ... [详细]
author-avatar
张光和尚山秀珍
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有