Home > Web Front-end > JS Tutorial > In the Chrome browser, how to prevent input[text] and textarea from appearing with yellow borders when focused_javascript tips

In the Chrome browser, how to prevent input[text] and textarea from appearing with yellow borders when focused_javascript tips

WBOY
Release: 2016-05-16 18:06:25
Original
1288 people have browsed it

Especially input[text] and textarea, and there is also a function in the lower right corner of textarea that can be used to drag the size of the textarea with the mouse, as shown in the following figure:

input[text]:

In the Chrome browser, how to prevent input[text] and textarea from appearing with yellow borders when focused_javascript tips

textarea:

In the Chrome browser, how to prevent input[text] and textarea from appearing with yellow borders when focused_javascript tips

Sometimes the yellow border affects the page effect, and dragging the textarea to change the size directly affects the layout. Therefore, in order to prevent these redundant functions and effects from affecting the page, you can use a few CSS to clear the default settings of the Chrome browser. The effect, the code is as follows:

The yellow border generated when canceling the focus of the form item:

Copy the code The code is as follows:

input,button,select,textarea{outline:none}

Cancel the dragging and resizing function of textarea:
Copy code The code is as follows:

textarea{resize:none}

After merging:
Copy code The code is as follows:

input,button,select,textarea{ outline:none;}
textarea{ font-size:13px; resize:none;}
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template