13 practical CSS tips to help you improve front-end development efficiency!

This article compiles and shares 13 CSS techniques that may be useful on the front end, including modifying input placeholder styles, multi-line text overflow, hiding scroll bars, modifying cursor colors, etc. I hope it will be helpful to everyone!

Modify input placeholder style, multi-line text overflow, hide scroll bars, modify cursor color, horizontal and vertical centering. What a familiar scene! Front-end developers deal with them almost every day. This article collects 13 CSS skills, let’s review them together.

1. Solve the problem of 5px spacing in images

Do you often encounter the problem of extra5pxspacing at the bottom of images? Don't worry, there are 4 ways to solve it. [Recommended learning:css video tutorial]

• Solution 1: Solve thefont-size:0px
• of its parent element Solution 2: Add the style of img todisplay:block
• Solution 3: Add the style of img tovertical-align:bottom
• Solution Solution 4: Increase the style of the parent element byline-height:5px

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

In the current front-end, the CSS unit isvh, set the element height style toheight:100vh

3. Modify the input box placeholder style

This is the placeholder attribute of the form input box. How to modify the default style is as follows:

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

4. Use:notselector

Every element except the last one needs some styling, which is very easy to achieve using thenotselector.

For example, to implement a list, the last element does not need to be underlined, as follows:

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

5. Usecaret-colorto modify the cursor color

Sometimes it is necessary to modify the color of the cursor. It's caret color time.

.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

When the content is not enough, the button should be at the bottom of the page. When there is enough content, the button should follow the content. When encountering similar problems, you can useflexto achieve smart layout!

 
这里为内容
 
按钮
 

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 oftype="number"

By default , a small arrow will appear at the end of the input typetype="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. Useoutline:noneDelete the input status line

When the input box is selected, there will be a blue status line by default, which can be changed usingoutline:noneRemove.

9. Solve the problem of iOS scroll bar getting stuck

On Apple phones, elements often get stuck when scrolling. At this time, only one line of CSS will Support elastic scrolling.

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

10. Draw a triangle

.triangle { display: inline-block; margin-right: 10px; /* 基础样式 */ border: solid 10px transparent; } /* 向下三角形 */ .triangle.bottom { border-top-color: #0097a7; } /* 向上三角形 */ .triangle.top { border-bottom-color: #b2ebf2; } /* 向左三角形 */ .triangle.left { border-right-color: #00bcd4; } /* 向右三角形 */ .triangle.right { border-left-color: #009688; }

11. Customize the selected text style

Can be customized through styles The color and style of text selection, the key styles are as follows:

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

12. Text that is not allowed to be selected

Use styleuser-select: none;

13 Usefilter:grayscale(1)Put the page in gray mode

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

body{ filter: grayscale(1); }

(Learning video sharing:web front-end)

The above is the detailed content of 13 practical CSS tips to help you improve front-end development efficiency!. For more information, please follow other related articles on the PHP Chinese website!