Chrome removes the blue border and the yellow background color, and chrome removes the blue border

Chrome removes the blue border and the yellow background color, and chrome removes the blue border

1. chrome will display a blue border after the selected text box. How can I remove it?

Add this style attribute to the text box to solve the problem: outline: none;

2. chrome will automatically record the searched keywords. When you click the text box next time, you will list the searched keywords in a drop-down box. When you click the keywords in the list, the selected keywords are automatically filled in the text box. However, the background of the text box changes and becomes yellow. How can this problem be removed?

This is also because chrome adds the background style attribute to the automatically filled text box by default, which can be seen in the viewing element of chrome:

The first idea here is to directly overwrite the background-color, but it does not seem to work. We can see that I have covered the background-color attribute below, but the background color is yellow:

Find a solution on Baidu: add relevant styles

Input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px white inset ;}

In fact, it is not to block the background style added by the chrome browser by default, but to use the border shadow of the text box to cover the background color. Px in the style is the shadow width, of course, as long as the width is greater than the background color area.

However, this is only suitable for the case where a white background is needed. What should I do if I want a transparent background?

The mandatory input box cannot be searched automatically: add the property autocomplete = 'off'