1. Solve the problem of 5px spacing of pictures

Do you often face the problem of 5px extra space at the bottom of the image? Don't worry, there are 4 ways to solve it.

Solution 1: Set the font-size of its parent element: 0px
Solution 2: Add display:block to the style of img
Solution 3: Add vertical-align: bottom to the img style
Solution 4: Increase the style of the parent element to line-height: 5px

2. How to make the height of the element the same as the window

The unit of CSS in the current front end is vh, and the element height style is set to height:100vh

3. Modify the input box placeholder style

input::-webkit-input-placeholder {
  color: #babbc1;
  font-size: 12px;
}

4. Use the :not selector

All but the last element need some styling, which can be easily achieved using the not selector. For example, to implement a list, the last element does not need to be underlined, like so:

li:not(:last-child) {
  border-bottom: 1px solid #ebedf0;
}

5. Modify the style of the input box placeholder

The function of this CSS code is to set styles such as border, rounded corners, size and cursor color for an input box, and define the placeholder text style of the input box at the same time. The text inside the input box will be displayed in light yellow, and the placeholder text will be displayed in dark gray.

.caret-color {
  width: 300px;
  padding: 10px;
  margin-top: 20px;
  border-radius: 10px;
  border: solid 1px #ffd476;
  box-sizing: border-box;
  background-color: transparent;
  outline: none;
  color: #ffd476;
  font-size: 14px;
  caret-color: #ffd476;
}

.caret-color::-webkit-input-placeholder {
  color: #4f4c5f;
  font-size: 14px;
}

6. Use flex layout to intelligently pin elements to the bottom

Buttons should be at the bottom of the page when there is not enough content. When there is enough content, the button should follow the content. When you encounter similar problems, you can use flex to achieve smart layout!

<div class="container">
  <div class="main">main</div>
  <div class="footer">button</div>
</div>

The CSS code is as follows:

.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.main {
  flex: 1;
  background-image: linear-gradient(
    45deg,
    #ff9a9e 0%,
    #fad0c4 99%,
    #fad0c4 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.footer {
  padding: 15px 0;
  text-align: center;
  color: #ff9a9e;
  font-size: 14px;
}

7. Remove the arrow at the end of type="number"

By default, a small arrow will appear at the end of the input type of type="number", but sometimes it needs to be removed, you can use the following style:

input {
  width: 300px;
  padding: 10px;
  margin-top: 20px;
  border-radius: 10px;
  border: solid 1px #ffd476;
  box-sizing: border-box;
  background-color: transparent;
  outline: none;
  color: #ffd476;
  font-size: 14px;
  caret-color: #ffd476;
  display: block;
}

input::-webkit-input-placeholder {
  color: #4f4c5f;
  font-size: 14px;
}
/* 关键样式 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

8. Use outline:none to remove the input status line

When the input box is selected, there will be a blue status line by default, which can be deleted by using outline:none.

9. Solve the problem that the iOS scroll bar is stuck

On iPhones, elements often get stuck when scrolling. At this point only one line of CSS will support elastic scrolling.

body,html{
  -webkit-overflow-scrolling: touch;
}

10. Customize selected text styles

You can customize the color and style of the selected text through styles. The key styles are as follows:

::selection {
  color: #ffffff;
  background-color: #ff4c9f;
}

11. Text is not allowed to be selected

Implement it with the following styles:

user-select: none;

12. Use filter:grayscale(1) to make the page in grayscale mode

One line of code will put the page in gray mode.

body{
  filter: grayscale(1);
}

Finish

Due to the limited space of the article, today’s content will be shared here. At the end of the article, I would like to remind you that the creation of the article is not easy. If you like my sharing, please don’t forget to like and forward it, so that more people in need See. At the same time, if you want to gain more knowledge of front-end technology, welcome to follow me, your support will be the biggest motivation for me to share. I will continue to output more content, so stay tuned.

Share 12 practical CSS advanced tips