Is it feasible to customize the css3 resize feature?

Question

Is it feasible to customize the css3 resize feature?

I'm curious - is there a way to customize the CSS3 resize property?

div {
  resize: both;
  overflow: auto;
}

Basically, I am looking for a horizontal resize with a vertical bar instead of the default handle. Take a look at the images for reference. Is it possible to achieve something like this using CSS, or do you have any other lightweight alternatives in mind?

html css stylesheet

Answer 1

Answer №1

Just a heads up: This solution is specifically for WebKit browsers, as attempts with other browsers and their named versions didn't yield successful results.

Code:

If you have an element styled like this in your CSS:

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

You can customize the handle by adding WebKit's specific pseudo-selector ::-webkit-resizer:

::-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:

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

Final thoughts

I tried using ::-moz-resizer on FF22, but it didn't function properly. Therefore, resorting to creating a JavaScript alternative similar to StackOverflow's textarea handle might be necessary.

Extra info

When styling shadow DOM pseudo selectors, avoid combining them into one selector like

::-webkit-resizer, ::-moz-resizer { /*css*/}

, as it will invalidate the entire selection.

Here is a reference list of Shadow DOM selectors: https://gist.github.com/afabbro/3759334
For more information on Shadow DOM (HTML5Rocks), check here and here.
A visually appealing and well-organized list of shadow DOM selectors along with screenshots can be found here
Check out the list of Mozilla's selectors (no pseudo-selector for resizer) here

Answer 2

Just a heads up: This solution is specifically for WebKit browsers, as attempts with other browsers and their named versions didn't yield successful results.

Code:

If you have an element styled like this in your CSS:

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

You can customize the handle by adding WebKit's specific pseudo-selector ::-webkit-resizer:

::-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:

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

Final thoughts

I tried using ::-moz-resizer on FF22, but it didn't function properly. Therefore, resorting to creating a JavaScript alternative similar to StackOverflow's textarea handle might be necessary.

Extra info

When styling shadow DOM pseudo selectors, avoid combining them into one selector like

::-webkit-resizer, ::-moz-resizer { /*css*/}

, as it will invalidate the entire selection.

Here is a reference list of Shadow DOM selectors: https://gist.github.com/afabbro/3759334
For more information on Shadow DOM (HTML5Rocks), check here and here.
A visually appealing and well-organized list of shadow DOM selectors along with screenshots can be found here
Check out the list of Mozilla's selectors (no pseudo-selector for resizer) here

Answer 3

Answer №2

Allow me to present my innovative solution

https://jsfiddle.net/tomoje/x96rL2sv/26/

This solution is compatible with all browsers and devices, responsive to both mouse and touch input without relying on images.

The key is providing the user with a handle that expands to the entire working area, preventing issues when the javascript function slows down due to system overload or other factors.

<div class="cSuwakT" id="idSuwakKontenerGalka"></div>

Answer 4

Allow me to present my innovative solution

https://jsfiddle.net/tomoje/x96rL2sv/26/

This solution is compatible with all browsers and devices, responsive to both mouse and touch input without relying on images.

The key is providing the user with a handle that expands to the entire working area, preventing issues when the javascript function slows down due to system overload or other factors.

<div class="cSuwakT" id="idSuwakKontenerGalka"></div>

Answer 5

Answer №3

UPDATE: I discovered a more efficient method to achieve the desired result. It requires less code and provides smoother behavior. This approach is based on the same principle as the previous one and has been successfully tested in both Chrome and Edge browsers.

.resize {
  width: 300px;
  height: 250px;
  position: static; /* default */
  resize: horizontal;
  overflow: scroll;
  padding-right: 10px; /* ensure scrollbar width is clickable */
  background-color: slategray;
  border: 1px solid darkgray;
}

.resize > div{
  position: absolute; /* required */
  box-sizing: border-box; /* prevents content from overflowing .resize with padding */
  padding: 10px; /* customize padding */
  width: inherit;  
  height: inherit; 
  overflow: clip; 
  overflow-clip-margin: content-box;
}

.resize::-webkit-scrollbar {
  height: inherit; 
  width: 10px; 
}

.resize::-webkit-resizer {
  background: silver;
  border: 1px solid darkgray;
}

<div class="resize">
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    <a href="#">Click</a>
  </div>
</div>

<div class="resize">
  <div>
  </div>
</div>

PREVIOUS VERSION:

This solution utilizes only CSS (specifically webkit) and can be slightly complex. However, it works well if your content is non-interactive. The concept leverages the dependency of resizer size on scrollbar dimensions.

I devised this technique by referencing another answer that explains how to synchronize parent and child element sizes using only CSS.

/* An invisible scrollbar overlays the content when not using a parent container.
You may omit the parent if the content is not interactive.
Using a parent allows for clickable content and avoids unnecessary scrolling,
though it adds complexity overall.

.resize-parent {
  background-color: orange;
  position: relative;
  display: inline-block;
  overflow: clip;
}

.resize {
  background-color: wheat;
  width: 300px;
  height: 250px;
  position: relative;
  resize: horizontal;
  overflow-x: overlay;
  z-index: 0;
}

.resize::before {
  content: "";
  width: 105%;
  height: 105%;
  background: transparent;
  pointer-events: none;
  display: block;
  position: absolute;
}

.resize-content {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  box-sizing: border-box;
  padding-left: 10px; 
  margin-left: -10px; 
  background: silver;
}

.resize::-webkit-scrollbar {
  height: 250px; 
  width: 10px; 
}

.resize::-webkit-resizer {
  background: cadetblue;
}

.resize::-webkit-scrollbar-corner {
  background: gold;
}

<div class="resize">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
  <a href="#">Click</a>
</div>

<div class="resize-parent">
  <div class="resize-content">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliqué ex ea commodo consequat.
    </p>
    <a href="#">Click</a><br>
  </div>
  <div>
    <div class="resize"></div>
  </div>
</div>

Link to demonstration on jsFiddle Hopefully, this explanation proves beneficial to someone.

Answer 6

UPDATE: I discovered a more efficient method to achieve the desired result. It requires less code and provides smoother behavior. This approach is based on the same principle as the previous one and has been successfully tested in both Chrome and Edge browsers.

.resize {
  width: 300px;
  height: 250px;
  position: static; /* default */
  resize: horizontal;
  overflow: scroll;
  padding-right: 10px; /* ensure scrollbar width is clickable */
  background-color: slategray;
  border: 1px solid darkgray;
}

.resize > div{
  position: absolute; /* required */
  box-sizing: border-box; /* prevents content from overflowing .resize with padding */
  padding: 10px; /* customize padding */
  width: inherit;  
  height: inherit; 
  overflow: clip; 
  overflow-clip-margin: content-box;
}

.resize::-webkit-scrollbar {
  height: inherit; 
  width: 10px; 
}

.resize::-webkit-resizer {
  background: silver;
  border: 1px solid darkgray;
}

<div class="resize">
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    <a href="#">Click</a>
  </div>
</div>

<div class="resize">
  <div>
  </div>
</div>

PREVIOUS VERSION:

This solution utilizes only CSS (specifically webkit) and can be slightly complex. However, it works well if your content is non-interactive. The concept leverages the dependency of resizer size on scrollbar dimensions.

I devised this technique by referencing another answer that explains how to synchronize parent and child element sizes using only CSS.

/* An invisible scrollbar overlays the content when not using a parent container.
You may omit the parent if the content is not interactive.
Using a parent allows for clickable content and avoids unnecessary scrolling,
though it adds complexity overall.

.resize-parent {
  background-color: orange;
  position: relative;
  display: inline-block;
  overflow: clip;
}

.resize {
  background-color: wheat;
  width: 300px;
  height: 250px;
  position: relative;
  resize: horizontal;
  overflow-x: overlay;
  z-index: 0;
}

.resize::before {
  content: "";
  width: 105%;
  height: 105%;
  background: transparent;
  pointer-events: none;
  display: block;
  position: absolute;
}

.resize-content {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  box-sizing: border-box;
  padding-left: 10px; 
  margin-left: -10px; 
  background: silver;
}

.resize::-webkit-scrollbar {
  height: 250px; 
  width: 10px; 
}

.resize::-webkit-resizer {
  background: cadetblue;
}

.resize::-webkit-scrollbar-corner {
  background: gold;
}

<div class="resize">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
  <a href="#">Click</a>
</div>

<div class="resize-parent">
  <div class="resize-content">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliqué ex ea commodo consequat.
    </p>
    <a href="#">Click</a><br>
  </div>
  <div>
    <div class="resize"></div>
  </div>
</div>

Link to demonstration on jsFiddle Hopefully, this explanation proves beneficial to someone.

Is it feasible to customize the css3 resize feature?

Answer №1

Code:

Final thoughts

Extra info

Answer №2

Answer №3

Similar questions

Ensure that any modifications made to an Angular service are reflected across all components that rely on that service

The ElementNotInteractableException error occurred because the element cannot be interacted with as it is currently not visible, therefore it cannot be manipulated using robot framework

Can two BootstrapVue tooltips be displayed on a single element with different target settings?

My attempts to integrate PHP into jQuery tabs have been unsuccessful

What is the reason behind the inconsistent behavior of Javascript's Date.getDate() and .setDate() methods?

What is the best way to ensure that my grid remains contained within its designated area?

Vanishing Submenus

Discovering specific values for an ID using API calls in Angular (Implementing CRUD Operations in Angular with API Integration)

customizable path settings for sprites using css

What is the most effective way to add HTML from a dynamically loaded document using AJAX?

I've been attempting to upload application/pdf files, but I'm having trouble. Can you provide me with instructions

"Struggling to divide CSS Code with PHP containing nested brackets? Here's how you can tackle it

Cross-Platform: Varied functionalities in disabled input fields (avoiding any direct replication)

Utilizing CSS3 Animation for enhanced hover effects

The color of the button in HTML5 will remain constant and not shift

Challenges with HTML and Session Handling

a versatile tool or JavaScript module for dissecting different HTML documents

Tips for minimizing excess white space in Shiny applications

Preventing Paste Function in Electron Windows

Creating two dropdown menus from a PHP array