When creating a page, it is common to have to customize the default behavior of some tags (such as placeholders for input, etc.), but the CSS for these default Settings is often difficult to remember, so it is necessary to keep a record of them. Here are some of the CSS I often use to reset the default behavior.

1. Placeholders

While setting placeholder properties in the placeholder, sometimes you need to change the default color or font size of the placeholder as required, using CSS like this:

// 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;
}Copy the code


Note that different browsers write differently:

  1. Each should be prefixed by its browser (e.g-webkit-);
  2. Firefox’splaceholderNot in front ofinput- ；
  3. Firefox and Chrome are both: :Two colons, IE is one: ;
  4. Older browsers may be written differently than newer browsers;

2, the small triangle of the drop-down box

The select TAB will have a small triangle, which I usually remove or replace with a background image. Remove small triangle CSS:

-webkit-appearance: none; -moz-appearance: none;Copy the code

There is no way to remove the triangle in Internet Explorer.

3, input[type=number] right spinners

Nput [type=number] is usually used on mobile devices. The browser recognizes the number input type and changes the numeric keypad to accommodate it. But it does have spinners, which are generally not needed. Remove the spinners CSS 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;
} Copy the code


4, - its - tap - highlight - color

On mobile browsers (such as wechat and QQ built-in browsers), when you click on a link or clickable element defined by Javascript, there will be a blue border. I hate this border, so I usually remove it:

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

Set the high light color to transparent so that you don't see the blue border.

5. Scroll bars

Webkit now supports custom styles for fields with Overflow attributes, list boxes, drop-down menus, and scroll bars for Textarea. Sometimes you need to remove the scrollbar, especially if there are several scrollbars on the page:

::-webkit-scrollbar {
  width: 0;
}Copy the code


Set the width of the scroll bar to 0 to remove the scroll bar. To customize the scrollbar styles, click www.xuanfengge.com/css3-webkit... , which describes how to customize scroll bar styles.

This is a record of some of the less memorable CSS code I use in my projects. If friends also have more commonly used CSS code is not easy to remember, welcome to help supplement.