Possible to style the css3 resize function?

by

Obs: This answer is for WebKit only, couldn’t find for other browsers nor testing with their - names worked.

Code:

Considering you have an element with the following CSS:

.styled {
    resize:both;
    overflow:auto;
    background:orange; /* just for looks */
}

If you add webkit’s specific pseudo-selector ::-webkit-resizer, you can style the handle:

::-webkit-resizer {
    border: 2px solid yellow;
    background: blue;
    box-shadow: 0 0 2px 5px red;
    outline: 2px dashed green;

    /*size does not work*/  
    display:block;  
    width: 150px !important;
    height: 150px !important;
}

Visual:

-webkit-resizer

http://jsfiddle.net/RaphaelDDL/ryphs/1/

Final thoughts

I’ve tested with ::-moz-resizer on FF22, didn’t worked. so yeah, you are stuck into making the javascript version, mimicking StackOverflow’s textarea handle.

Extra info

When styling shadow dom pseudo selectors, do NOT stack them into a single selector ::-webkit-resizer, ::-moz-resizer { /*css*/} because will invalidate the entire selector.

More Related Contents:

  1. How to style SVG with external CSS?
  2. Is type=”text/css” necessary in a tag?
  3. Can you link to a CSS file from an email?
  4. How can I make a TextArea 100% width without overflowing when padding is present in CSS?
  5. Will targeting IE8 with conditional comments work?
  6. Styling the “ element in CSS?
  7. How to play CSS3 transitions in a loop?
  8. Can't get footer image to display in IE8?
  9. How to force child div to be 100% of parent div’s height without specifying parent’s height?
  10. SVG drop shadow using css3
  11. Switching the order of block elements with CSS [duplicate]
  12. Imitating a blink tag with CSS3 animations
  13. How can I force a long string without any blank to be wrapped?
  14. Background image not showing in Safari
  15. How to vertically align into the center of the content of a div with defined width/height?
  16. What is the performance impact of the universal selector?
  17. Allow specific tag to override overflow:hidden
  18. Place boxes inside ul in center, but align them left
  19. Aligning decimal points in HTML
  20. Can I nest button inside another button?
  21. Auto Resize Image in CSS FlexBox Layout and keeping Aspect Ratio?
  22. How to make the web page height to fit screen height
  23. How can I create a wavy shape CSS?
  24. Display text, a dotted line then more text spanning the width of the page
  25. CSS Zigzag Border with a Textured Background
  26. How can I control the width of a label tag?
  27. How to create a multi-column list?
  28. Bootstrap – Fill fluid container between header and footer
  29. “break-inside: avoid-column” doesn’t work in Firefox
  30. How to make Bootstrap cards the same height in card-columns?

Leave a Comment