Restrict Safari Textarea Resizing and Remove Outline Style

Sometimes, we want that the pages which we code are have same action in all browsers and for that we do some extra operations. Now, I will explain how can we restrict or stop the resizing feature on Safari for the textarea elements and remove online style for the textarea and input elements.

As known, Safari (and Chrome) has a feature to resize the textarea elements.

If you want to restrict this feature than just apply the CSS code below to the textarea element.

.restricted {
   max-width: 300px;
   max-height: 250px;
}

Or, if you want to stop it completely you can use the CSS code below.

.stoped {
   width: 300px;
   height: 200px;
   max-width: 300px;
   max-height: 200px;
}

It is possible to do by CSS 3 specification as following.

.stoped {
   resize: none;
}

Besides, we know this browsers apply an outline style on the textarea and input elements when they focused. In order to disable this feature we can use the CSS code below. That will remove the outline style of the textarea and input elements.

.nooutline {
   outline: 0;
}

Demo Page

Categories: Browsers, CSS
Tags: CSS, Safari