Question: Styling textarea scrollbar

[emiliedebra]

After a few hours of trying multiple combinations, including using mixins (--iron-autogrow-textarea) I could not find a way to style the scrollbar of this element using webkit-scrollbar styles, such as:

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

Is this possible? Any help on this would be appreciated!

[emiliedebra]

For reference - http://stackoverflow.com/questions/34209783/is-it-possible-to-style-the-iron-autogrow-textarea-scrollbar-in-polymer-1-x

[notwaldorf]

Hmmm, I don't think that's actually possible right now, but I could add some custom mixins for this. Is it only those 3 pseudoselectors that you need?

[emiliedebra]

This sounds like a generic problem, the above pseudoselectors were just an example (see here).

The only way I got this to work was to copy the iron-autogrow-textarea code, rename it and add the pseudoelements within the style tags. So I am not sure how this could be done using a mix-in.

  <style>
    :host {
      display: inline-block;
      position: relative;
      width: 400px;
      border: 1px solid;
      padding: 2px;
      -moz-appearance: textarea;
      -webkit-appearance: textarea;
    }

    ::-webkit-scrollbar {
        width: 6px!important
    }

    ::-webkit-scrollbar-thumb {
        background-color: rgba(0,0,0,.2)
    }

    ::-webkit-scrollbar-track {
        background: rgba(255,255,255,.08)
    }
    ... 
  </style>

[notwaldorf]

With a mixin, there would be a --paper-text-area-scrollbar mixin available for you to use, like this

--paper-text-area-scrollbar: {
  width: 6px!important;

And internally, it would be used inside the paper-textarea as

  ::-webkit-scrollbar {
    @apply(--paper-text-area-scrollbar);
    }

[mituldreamworld]

Hi, we had same requirements and we added following css to style our scrollbar:

   <style is="custom-style" include="iron-flex">
      body {}
   </style>
    
  /* we added following style along with custom style*/
   <style type="text/css">
    ::-webkit-scrollbar {
       width: 8px;
       height: 8px;
   }
    
   ::-webkit-scrollbar-track {
       background-color: pink;
   }
    
   ::-webkit-scrollbar-thumb {
       cursor: pointer;
       background-color: pink;
   }
   </style>

[ghost]

I would welcome mixins for scrollbar styles of iron-autogrow-textarea (1.x branch) as well.

The selectors I use are:

• ::-webkit-scrollbar
• ::-webkit-scrollbar-thumb
• ::-webkit-scrollbar-thumb:hover
• ::-webkit-scrollbar-button
• ::-webkit-scrollbar-corner

[nakul-niroula]

I still cannot apply the Scroller CSS on iron-autogrow-textarea, any solution on this ? Here is my code:

        <style is="custom-style">
          paper-textarea {
            word-break: break-word;

            --iron-autogrow-textarea: {
              box-sizing: border-box;
              overflow-y: auto;
              max-height: 150px;
            }
          }
        </style>
        </custom-style>

With a mixin, there would be a --paper-text-area-scrollbar mixin available for you to use, like this

--paper-text-area-scrollbar: {
  width: 6px!important;

And internally, it would be used inside the paper-textarea as

  ::-webkit-scrollbar {
    @apply(--paper-text-area-scrollbar);
    }