Let's look at the following code to successfully implement the hidden input text. But it is divided into three kinds of situations, which we analyze later.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> ways to hide text in input </title>
<style type= "Text/css" >
/*<! [cdata[*/
Input {
margin:5px 0;
width:200px;
height:20px;
Display:block;
Overflow:hidden;
Background: #f9f9f9;
border:1px solid Orange;
}
INPUT.A {
Ie:expression (bb.value= "Submission");
Text-indent:-200em;
}
input.b {
padding-top:20px;
}
input.c {
Font-size:100em
}
/*]]>*/
</style>
<body>
<input type= "button" value= "Submit" id= "BB" class= "a"/>
<input type= "button" value= "Submit" class= "B"/>
<input type= "button" value= "Submit" class= "C"/>
</body>
</body>
What we need to register specifically is the following code:
Input {
margin:5px 0;
width:200px;
height:20px;
Display:block;
Overflow:hidden;
Background: #f9f9f9;
border:1px solid Orange;
}
Let's look at the following analysis:
The first of these methods
INPUT.A {
Ie:expression (bb.value= "Submission");
Text-indent:-200em;
}
There's a problem with opera.
The second method
input.b {
padding-top:20px;
}
If this value is too small in opera on the text is still visible, so set a large number of no problem, but the FF will appear to the phenomenon of high support;
The third method
input.c {
Font-size:100em
}
This method should be said to be the best compatibility
FF is a bit BT. In padding, the height and width of the ie,opear are unchanged, and the FF is changed.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
