CODEWITHSUNDEEP
css
anon
anon

Reputation:

Styling a textarea resizer block

I am trying to create a styled textarea, for this it is 99% done, but one final thing remains. The resize icon on the bottom right, I know in wekbit based browsers you have textarea::-webkit-resizer, but I cannot find anything for firefox / IE etc.

If anyone can help with this, it is greatly appreciated.

My example code is:

SCSS:

textarea.myTextArea {
    background-color: $my-color;
    border: 0;

    &::-webkit-resizer {
        background-image: url('images/myimage.svg');
    }
}

Upvotes: 2

Views: 3660

Answers (1)

Seika85
Seika85

Reputation: 2021

To put it as an answer:

The CSS3-property resize is not supported in any version of IE - including Edge. (http://caniuse.com/#feat=css-resize)

As far as I know it's not possible to style the resize-handler in Firefox. The resize property is still a W3C CSS3 draft (see https://developer.mozilla.org/en-US/docs/Web/CSS/resize#Specifications or https://www.w3.org/TR/css-ui-3/#resize).
So you either go full and save performance by not using draft properties, deal with issues like you're facing now, or use external libraries to mimic it and affecting page load time.

As a side note: FOUC can be avoided or more specifically "concealed" by hiding the page content until everything is styled accordingly - e.g. with using callbacks and avoiding window.load if possible.

A good JS library I know of to accomplish cross-browser resizable textareas (and other elements) is https://jqueryui.com/resizable/#textarea.

Upvotes: 1

Related Questions