Tips for front-end style modifications

The Company Project landing page was modified today.

The project landing page consists of a public template page at the head and bottom, and the middle part for the login page itself.

In view of this, the middle part because do not worry about changes affect other pages, it is best to change, do not need to discuss. For the head and bottom, first use the browser debugging tool to find the key elements and their selectors, and then modify and test on the browser (for the div layer is more complex, only by guessing). If the element property that you want to modify already exists and the value you want differs from other pages, redefine the element property in the HTML where the current page resides. Sometimes, due to the higher weight of the original element, which is not valid after being defined directly in HTML, it should be called '!important ' after the property value to increase its weight. Here, if the desired modification element is a class selector only, and the class is defined for a UI framework, it is best not to modify it, you can add an ID selector to the element, and redefine the element properties in the ID selector. Because the ID selector has a higher weight than the class selector, it is generally not necessary to add '!important ' after the element attribute value.

(The above section, in short, is: To modify the contents of a public template page, and modify the effect is only used by the current page, the conflicting element properties are redefined in the current page HTML.) If the effect remains unchanged after the redefinition, consider whether the weight is the result, or, if so, add "!important" after the newly defined element property value. "!important" can not be used, because it may lead to new weight problems.)

Common modifications:

1. The input box only leaves the border

input{

Border-top:none;

Border-left:none;

Border-right:none;

BORDER-BOTTOM:1PX solid black;

}

2. The input box has no background color (i.e. transparent):

input{

Background:transparent;

}

3. The cursor color value setting when the input box is clicked:

input:focuse{

Color:white;

}

4. Input box placeholder color change:

Input::-webkit-input-placeholder {

/* WebKit Browsers */
Color:white!important;//Add!important is to increase its weight, do not know how the weight of the situation can not be added, when found not added there is no effect, add it
}
Input:-moz-placeholder {/* Mozilla Firefox 4 to 18 */
Color:white!important;
}
Input::-moz-placeholder {/* Mozilla Firefox 19+ */
Color:white!important;
}
Input:-ms-input-placeholder {/* Internet Explorer * *
Color:white!important;
}

Tips for front-end style modifications