Custom Cross browser form elements consistency: mainly </a></h1> </div> <div class="grid fw-wrap pb8 mb16 bb bc-black-075"> <div class="grid--cell ws-nowrap mr16 mb8" title="2016-01-12 19:07:53Z"> <span class="fc-light mr2">Asked</span> <time itemprop="dateCreated" datetime="2011-04-30T21:25:26.517" class="fromnow">Apr 30 '11 at 21:25</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2011-04-30T21:25:26.517" datetime="2011-04-30T21:25:26.517">Apr 30 '11 at 21:25</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 409 times"> <span class="fc-light mr2">Viewed</span> 409 times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="5844691" data-ownerid="710557" data-score="0"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="5844691"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> <button class="js-bookmark-btn s-btn s-btnunset c-pointer py4"> <svg aria-hidden="true" class="svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M6 1a2 2 0 00-2 2v14l5-4 5 4V3a2 2 0 00-2-2H6zm3.9 3.83h2.9l-2.35 1.7.9 2.77L9 7.59l-2.35 1.7.9-2.76-2.35-1.7h2.9L9 2.06l.9 2.77z"></path></svg> <div class="js-bookmark-count mt4" data-value=""></div> </button> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>It's always been a pain to me working with form elements and css. Besides using flash, is there anyway to to customize a scrollbar in a <code><textarea></code>, I'm aware of jscrollpane, but from what I've seen it only works on divs, and I'm not jquery savvy enough to tinker around in there.</p> <p>I'm also aware of this example, but it only works in IE, and, so I've read only in quirks mode.</p> <pre><code>scrollbar-3dlight-color:black; scrollbar-arrow-color:black; scrollbar-track-color:black; scrollbar-darkshadow-color:gray; scrollbar-face-color:orange; scrollbar-highlight-color:gold; scrollbar-shadow-color:brown} </code></pre></div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/html" class="post-tag js-gps-track" title="show questions tagged 'html'" rel="tag">html</a> <a href="../../questions/tagged/css" class="post-tag js-gps-track" title="show questions tagged 'css'" rel="tag">css</a> <a href="../../questions/tagged/textarea" class="post-tag js-gps-track" title="show questions tagged 'textarea'" rel="tag">textarea</a> <a href="../../questions/tagged/scrollbar" class="post-tag js-gps-track" title="show questions tagged 'scrollbar'" rel="tag">scrollbar</a> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Apr 30 '11 at 21:25">asked Apr 30 '11 at 21:25</time> <a href="../../users/710557/laphiloctete" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/710557.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="laphiloctete" /> </a> <div class="s-user-card--info"> <a href="../../users/710557/laphiloctete" class="s-user-card--link">laphiloctete</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">476</li> <li class="s-award-bling s-award-blinggold" title="1 gold badge">1</li> <li class="s-award-bling s-award-blingsilver" title="6 silver badge">6</li> <li class="s-award-bling s-award-blingbronze" title="20 bronze badge">20</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-5844691" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="5844691" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-6712780" class="comment js-comment " data-comment-id="6712780" data-comment-owner-id="405015" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment6712780_5844691"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">WebKit only: http://stackoverflow.com/questions/4641169/apple-like-scrollbars-using-css</span> – <a href="../../users/405015/thirtydot" title="224,678 reputation" class="comment-user ">thirtydot</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/5844691/custom-cross-browser-form-elements-consistency-mainly-textarea#comment6712780_5844691"><span title="2011-04-30T21:28:37.510 License: CC BY-SA 3.0" class="relativetime-clean">Apr 30 '11 at 21:28</span></a></span> </div> </div> </li> <li id="comment-6712804" class="comment js-comment " data-comment-id="6712804" data-comment-owner-id="710557" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment6712804_5844691"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Thanks, Will this work in IE? I was under the impression it was only from Chrome, Firefox and Safari?</span> – <a href="../../users/710557/laphiloctete" title="476 reputation" class="comment-user owner">laphiloctete</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/5844691/custom-cross-browser-form-elements-consistency-mainly-textarea#comment6712804_5844691"><span title="2011-04-30T21:30:40.853 License: CC BY-SA 3.0" class="relativetime-clean">Apr 30 '11 at 21:30</span></a></span> </div> </div> </li> <li id="comment-6712820" class="comment js-comment " data-comment-id="6712820" data-comment-owner-id="405015" data-comment-score="3"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> <span title="number of 'useful comment' votes received" class="warm">3</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment6712820_5844691"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">"WebKit only" means it will only work in WebKit browsers, such as Chrome or Safari. It won't work in Firefox or IE. The fact that it only works in WebKit browsers is why I posted it as a comment rather than an answer.</span> – <a href="../../users/405015/thirtydot" title="224,678 reputation" class="comment-user ">thirtydot</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/5844691/custom-cross-browser-form-elements-consistency-mainly-textarea#comment6712820_5844691"><span title="2011-04-30T21:32:39.227 License: CC BY-SA 3.0" class="relativetime-clean">Apr 30 '11 at 21:32</span></a></span> </div> </div> </li> <li id="comment-6712875" class="comment js-comment " data-comment-id="6712875" data-comment-owner-id="710557" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment6712875_5844691"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Ah, I see, would it be possible to use a comination of mozkit, webkit, and the example above to get it to work in all browsers?</span> – <a href="../../users/710557/laphiloctete" title="476 reputation" class="comment-user owner">laphiloctete</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/5844691/custom-cross-browser-form-elements-consistency-mainly-textarea#comment6712875_5844691"><span title="2011-04-30T21:38:32.740 License: CC BY-SA 3.0" class="relativetime-clean">Apr 30 '11 at 21:38</span></a></span> </div> </div> </li> <li id="comment-6713158" class="comment js-comment " data-comment-id="6713158" data-comment-owner-id="732174" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment6713158_5844691"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">you could, but the question is, is it worth ? also the scrollbars in Opera and IE won't be as good as those in Chrome, Safari or FF.</span> – <a href="../../users/732174/tomasz-golinski" title="743 reputation" class="comment-user ">Tomasz Golinski</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/5844691/custom-cross-browser-form-elements-consistency-mainly-textarea#comment6713158_5844691"><span title="2011-04-30T22:12:23.753 License: CC BY-SA 3.0" class="relativetime-clean">Apr 30 '11 at 22:12</span></a></span> </div> </div> </li> <li id="comment-6714444" class="comment js-comment " data-comment-id="6714444" data-comment-owner-id="594235" data-comment-score="2"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> <span title="number of 'useful comment' votes received" class="warm">2</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment6714444_5844691"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">I tend to avoid altering things that are part of the browser itself. The user expects his scrollbars to look & behave a certain way, typically consistent with scrollbars in the OS as well. When you start tinkering with these, you'll always have a certain number of people that will be confused or put-off. Not to mention the work of maintaining at least three unique sets of CSS rules to cover the three major rendering engines. As stated by Tomasz, is the end result really worth all the trouble?</span> – <a href="../../users/594235/sparky" title="98,165 reputation" class="comment-user ">Sparky</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/5844691/custom-cross-browser-form-elements-consistency-mainly-textarea#comment6714444_5844691"><span title="2011-05-01T01:34:01.363 License: CC BY-SA 3.0" class="relativetime-clean">May 01 '11 at 01:34</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <div id="answers"> <a name="tab-top"></a> <div id="answers-header"> <div class="answers-subheader grid ai-center mb8"> <div class="grid--cell fl1"> <h2 class="mb0" data-answercount="9">0 Answers<span style="display:none;" itemprop="answerCount">0</span></h2> </div> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>