5 CSS Custom code you must know

When you make a page, you often encounter default behaviors that require you to customize some tags (such as the placeholder for input, etc.), but these default settings of CSS are generally difficult to remember, so it is necessary to make your own records. Here are some of the CSS that I used to reset the default behavior.

1. Placeholder

When setting the placeholder property in the <input> tab, it is sometimes necessary to modify the default color or font size of the placeholder, which can be used with the following CSS:

Firefoxinput::-moz-placeholder {    color:red;    font-size:18px;  } Ieinput:-ms-input-placeholder {  color:red;  font-size:18px;} Chromeinput::-webkit-input-placeholder {  color:red;  font-size:18px;}

It is important to note that different browsers have different wording:

Must be prefixed with the respective browser (e.g.-webkit-);

There is no input-in front of Firefox's placeholder;

Firefox and Chrome are:: Two colons, while IE is one:;

The lower version of the browser may be different from the new version of the browser;

2, drop down box of the small triangle

The Select label will appear in the small triangle, usually I will remove the small triangle, or with the background image of the way to meet the requirements of the appearance. Remove the CSS from the small triangle:

-webkit-appearance:none; -moz-appearance:none;

There is no way to get rid of the small triangle in IE browser.

3, Input[type=number] to the right of the Spinners

Nput[type=number] typically used on mobile devices, the browser recognizes the number input type and then changes the numeric keypad to accommodate it. But it will appear spinners, generally do not need it. Remove the Spinners CSS as follows:

Firefoxinput[type= ' number ' {  -moz-appearance:textfield;} Chromeinput[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {  - Webkit-appearance:none;  margin:0;}

4,-webkit-tap-highlight-color

On the mobile browser (such as, QQ built-in browser), when you click on a link or a clickable element defined by JavaScript, there will be a blue border, I hate this border, so generally I will remove:

-webkit-tap-highlight-color:rgba (255, 255, 255, 0);

Make the high color transparent so that you don't see the blue border.

5. Scroll bar

WebKit now supports areas with overflow properties, list boxes, drop-down menus, textarea custom styles for scroll bars. Sometimes you need to remove the scroll bar, especially when there are several scrollbars in the page:

::-webkit-scrollbar {  width:0;}

Set the scroll bar width to 0 to remove the scroll bar. If you need to customize the scrollbar style, you can click Www.xuanfengge.com/css3-webkit-scrollbar.html, which describes how to customize the scrollbar style.

The above is a list of the most commonly used CSS code in my project that is not easy to remember. If your friends also have more commonly used CSS code that is not easy to remember, please help to add.

"Recommended"

1. Free CSS Online video tutorial

2. CSS Online Manual

3. php.cn Lonely Nine-base (2)-css video tutorial