5 must-know css customization codes

When making pages, we often encounter the need to customize the default behavior of some tags (such as: input placeholders, etc.), but the css of these default settings are generally difficult to remember, so it is necessary to do it yourself Record. Below are some css that I often use to reset default behavior.

1. Placeholder

When setting the placeholder attribute in the tag, sometimes the default color or font of the placeholder needs to be modified due to needs Size, you can use the following css:

// firefox
input::-moz-placeholder {
    color: red;
    font-size: 18px;
  }
// IE
input:-ms-input-placeholder {
  color: red;
  font-size: 18px;
}
// chrome
input::-webkit-input-placeholder {
  color: red;
  font-size: 18px;
}

It should be noted that different browsers have different writing methods:

must be added with the prefix of the respective browser (such as -webkit- );

There is no input- in front of the placeholder of firefox;

Firefox and chrome both have :: two colons, while IE has one :;

Low version browser The writing method may be different from the new version of the browser;

2. A small triangle will appear in the drop-down box

select label. Usually I will remove this small triangle, or replace it with a background image. In order to meet the requirements. Remove the css of the small triangle:

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

There is currently no way to remove the small triangle in IE browser.

3. The spinners on the right side of input[type=number]

nput[type=number] are usually used on mobile devices. The browser will recognize the number input type and then change the numeric keyboard to Get used to it. But it will appear spinners, generally you don't need it. The css to remove spinners is as follows:

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

4, -webkit-tap-highlight-color

On mobile browsers (such as WeChat and QQ built-in browsers), when you click a link Or when clickable elements defined through Javascript, a blue border will appear. I hate this border, so I usually remove it:

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

Set the highlight color to transparent , so that the blue border is no longer visible.

5. Scroll bar

Webkit now supports custom styles for scroll bars in areas with overflow attributes, list boxes, drop-down menus, and textareas. Sometimes it is necessary to remove the scroll bar, especially when there are several scroll bars on the page:

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

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

The above records the css codes that I commonly use in projects that are not easy to remember. If your friends also have more commonly used CSS codes that are not easy to remember, please feel free to add them.

【Related recommendations】

1. Free css online video tutorial

2. css online manual

3. php.cn Dugu Jiujian (2)-css video tutorial

The above is the detailed content of 5 must-know css customization codes. For more information, please follow other related articles on the PHP Chinese website!