Settings of textarea in WebKit

When using chrome or Safari, you often find that your textarea is very strange. You can drag it to zoom in and out, and there is a strange side. When we first encountered this kind of problem, we directly told the design that it was a browser feature, and we couldn't handle it. As a result, people used Google as an example. We had nothing to say about development. But the artist did not know how to do it, so developers had to work hard to compare Google's source code. There is no good way to do it either. Try it one by one.

In fact, it will be very easy to find. Record it here to avoid forgetting:

1. The page input box (input tag) is highlighted.

The style that shields the input focusing highlight effect:

Input {outline: none;} textarea {outline: none ;}

Second, the text box (textarea label) scaling function.

/* Css2.0 */textarea {width: 400px; max-width: 400px; Height: 400px; max-Height: 400px;}/* css3.0 */texearea {resize: none ;}

In the future, web pages may prefer Concise Design. Therefore, the WebKit development team does not consider the problems in the input box and text box when the design input box is rounded, therefore, if you hide the style before clicking, and you forget to remove the default style assigned by the focused WebKit, the WebKit engine browser will become faulty.

If you consider a browser compatible with the core of WebKit, we recommend that you maintain the original style when designing the input box or text box. If the design has a nice rounded corner, we recommend that you set the following content on the front end.CodeAdd it to base.css to avoid different effects in the WebKit browser.

Link:Settings of textarea in WebKit