CSS Tips Summary

Source: Internet
Author: User
This article mainly on the CSS tips for a simple summary. Have a good reference value, need to see the friends together

1. Remove input remember password and automatically fill the yellow background of the form


Input:-webkit-autofill {-webkit-box-shadow:0 0 0px 1000px #FFF inset;  } Where #fff is the background color value

2, IE8 does not support the Opacity:0 property, you can add the following attributes:


Filter:progid:DXImageTransform.Microsoft.Alpha (opacity=0);

3. The IE input box removes the cross of the text box and the eye icon of the password input box:


::-ms-clear,::-ms-reveal{display:none;}

4. TextArea Properties


Resize:none;  Remove size drag outline:none;  Remove yellow border

5, judge whether to meet the regular expression to write the correct way


Regular. Test (the Val value to be satisfied)

6, single-line text omitted


Overflow:hidden;text-overflow:ellipsis;white-space:nowrap;

7, when the style table font-size less than 12px, the Chinese version of the Chrome browser font display is still 12px, then you can use:


Html{-webkit-text-size-adjust:none;}

8. Address XMP tag does not wrap:


XMP {         whitewhite-space:pre-wrap;/* css-3 *    /whitewhite-space:-moz-pre-wrap;/* Mozilla, since 1999 */    whit Ewhite-space:-pre-wrap; /* Opera 4-6 *    /whitewhite-space:-o-pre-wrap;/* Opera 7 */    Word-wrap:break-word;/* Internet Explorer 5.5+ */
  white-space:pre-wrap; /* Firefox */}

9, the object height of 0 is not effective solution

Add a p to the outer layer so that the P's height is 0, or the font-size is 0


<p style= "height:0" >   <object Object width= "0" height= "0" ></object></p>

10. Input Box


Elimination of input memory function: In the input box add: autocomplete= "off" input content to prevent copying: oncopy= "return false;" oncut= "return false;" Content in input cancel paste: onpaste= "return false" input contents deselect, prevent copying: <body onselectstart= "return false" >

11. Full Screen Mask code segment (Fixed is relative window)


<p class= "Mask" ></p>. mask{position:fixed;top:0;left:0;width:100%;height:100%;z-index:999;}

12, the difference between Display:none and Visibility:hidden:


display:none; do not display, do not occupy space visibility:hidden; do not display, Occupy space 
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.