CSS make page layout instance: Hide Input text

Source: Internet
Author: User

The
" Below is a reference fragment:
<! 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  input  text </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= "submit");
 text-indent:-200em;
 }
input.b {
 padding-top:20px;
 }
input.c {
 font-size: 100em
 
/*]]>*/
</style>
<body>
<input type= but Ton " 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:

The following is a reference fragment:
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 method

below is a reference fragment:
input.a {  ie:expression (bb.value= "Submission");
 text-indent:-200em;
}

      problems with opera

   & nbsp;  the second method

the following is a reference fragment:
input.b {
 padding-top:20px;
}

      If the value is too small the text is still visible on opera, so setting a larger number is fine, but FF There will be the phenomenon of high support;
 
     The third method

Following is a reference fragment:
input.c {
 font-size:100em
}

& Nbsp;   &nbSp This method should be said to be the best compatibility.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.