How to distinguish whether an input is a button or a text box using CSS styles_Experience exchange

Technical investigation on how to distinguish whether an input is a button or a text box when setting styles - take out the content in the input

What do you think of when you see the HTML tag? ? A text box? A button? A radio button? A checkbox? ...Yes, yes, yes, they are all right. Maybe you may not have thought that this small input can actually create 10 different things. Here is a list to see which ones you have not thought of:
Text box
Password box
Submit button
Reset button
Radio button
Check box
Ordinary button
File selection control
Hidden box
Image button
So you may say that input is really a great thing, and it is so "doable" "Head", but when you actually try to set different styles for different controls in the project, you will find that input can really "bigger your head". I don't know why input was given so many identities in the first place, but its "N-fold identities" did bring a lot of trouble to website designers. Fortunately, the working people are great, and there are still ways to solve the problem~, although they all have their own fatal shortcomings Orz... The liberation methods are roughly summarized, and the list is as follows (I am not very talented, so mistakes and omissions are inevitable, so please give me some advice) Guidance):

1. Use css expression to determine the expression
2. Use the type selector in css
3. Use javascript script to implement
4. If You use Microsoft Visual Studio 2005 or later versions to develop projects. Congratulations, you can also use skin.

The following will explain the detailed implementation of each method and their advantages and disadvantages.

1: Use css expression to judge the expression
Implementation code reference:

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…

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'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('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…

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…

---

Summary: The above methods all have their own advantages and disadvantages, so using any one alone cannot solve the problem well. . Therefore, multiple methods should be used together to better solve the problem. But are multiple methods perfect if used together? NO~! It also has a fatal disadvantage - the maintenance of multiple solutions requires greater costs!

Postscript: This is a troubled era when non-web standard browsers, led by IE6, are sweeping the world. How many web page beginners have died tragically due to the weird parsing mode of IE6, how many programmers have been enslaved by IE6, and countless web designers have endured humiliation and eked out a living under the crotch of IE6. Although in the darkness, we are pleased to see the emergence of FireFox's brave people who oppose the tyranny, and the dawn of IE7's increasingly better support for Web standards. But the night will still last for a long time. We are both happy and sad about the era when web standards dominate the world. The good news is that by that time, our web design and planning will be as simple as eating. The sad thing is: if that time really comes, will our rice bowls still be so heavy? However, for the progress of human society, the technology that saves the earth, and the technological culture that develops the universe -_-b... I still look forward to the arrival of web standards that will dominate the world.

---

keyword: Automatically distinguish between various input styles, how to distinguish and , use Javascript to automatically distinguish various input styles, input, input type, input type file, input type hidden, input file, input.dll, html input, input type image