How to distinguish input boxes and buttons-CSS Tutorial-php.cn

How to distinguish input boxes and buttons

巴扎黑

Release： 2017-08-14 14:57:35

Original

2024 people have browsed it

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

When you see the html tag , you will What comes to mind? 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 "provocative", but when you actually try to set different styles for different controls in the project, you will find that input can really "Blow your head up". 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 For development projects in 2005 or subsequent versions, congratulations, you can also use skin.

Let’s 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>

Advantages: Simple, lightweight
Disadvantages: The expression judgment expression FireFox does not support. The fatal thing is that only one can be distinguished (for example, in the example, only the text text box can be distinguished), do not try to set multiple ones, the following ones will overwrite the above ones Orz...

The above is the detailed content of How to distinguish input boxes and buttons. For more information, please follow other related articles on the PHP Chinese website!