0

I would like to change the scroll bar of my textareas into a tiny scroll bar instead of the default one. I am a beginner in HTML and CSS so I couldn't change it while it is for a specific element (Textarea).

Screen shot:

enter image description here

My code:

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
 margin:0;
 padding:0;
 border:0;
 font-size:100%;
 font:inherit;
 vertical-align:baseline
}
body {
 line-height:1
}
ol,ul {
 list-style:none
}
blockquote,q {
 quotes:none
}
blockquote:before,blockquote:after,q:before,q:after {
 content:'';
 content:none
}
table {
 border-collapse:collapse;
 border-spacing:0
}
::-moz-focus-inner {
 padding:0;
 border:0
}
:-moz-placeholder {
 color:#bcc0c8!important
}
::-webkit-input-placeholder {
 color:#bcc0c8
}
:-ms-input-placeholder {
 color:#bcc0c8!important
}
body {
 font:12px/20px 'Lucida Grande',Verdana,sans-serif;
 color:white;
 background-color:white
}
input,textarea,select,label {
 font-family:inherit;
 font-size:12px;
 -webkit-box-sizing:border-box;
 -moz-box-sizing:border-box;
 box-sizing:border-box
}
.login {
 margin:50px auto;
 padding:18px 20px;
 width:360px;
 background:#3f65b7;
 background-clip:padding-box;
 border:1px solid #172b4e;
 border-bottom-color:#142647;
 border-radius:5px;
 background-image:-webkit-radial-gradient(cover,#437dd6,#3960a6);
 background-image:-moz-radial-gradient(cover,#437dd6,#3960a6);
 background-image:-o-radial-gradient(cover,#437dd6,#3960a6);
 background-image:radial-gradient(cover,#437dd6,#3960a6);
 -webkit-box-shadow:inset 0 1px rgba(255,255,255,0.3),inset 0 0 1px 1px rgba(255,255,255,0.1),0 2px 10px rgba(0,0,0,0.5);
 box-shadow:inset 0 1px rgba(255,255,255,0.3),inset 0 0 1px 1px rgba(255,255,255,0.1),0 15px 10px rgba(0,0,0,0.5)
}
.login>h1 {
 margin-bottom:20px;
 font-size:16px;
 font-weight:700;
 color:#FFFFFF;
 text-align:center;
 text-shadow:0 -1px rgba(0,0,0,0.4)
}
.login-input {
 display:block;
 width:100%;
 height:140px;
 margin-bottom:20px;
 padding:0 9px;
 color:#fff;
 text-shadow:0 1px #000;
 resize: none;
 background:#2b3e5d;
 border:1px solid #15243b;
 border-top-color:#0d1827;
 border-radius:4px;
 background-image:-webkit-linear-gradient(top,rgba(0,0,0,0.35),rgba(0,0,0,0.2) 20%,rgba(0,0,0,0));
 background-image:-moz-linear-gradient(top,rgba(0,0,0,0.35),rgba(0,0,0,0.2) 20%,rgba(0,0,0,0));
 background-image:-o-linear-gradient(top,rgba(0,0,0,0.35),rgba(0,0,0,0.2) 20%,rgba(0,0,0,0));
 background-image:linear-gradient(to bottom,rgba(0,0,0,0.35),rgba(0,0,0,0.2) 20%,rgba(0,0,0,0));
 -webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.3),0 1px rgba(255,255,255,0.2);
 box-shadow:inset 0 1px 2px rgba(0,0,0,0.3),0 1px rgba(255,255,255,0.2)
}
.login-input:focus {
 outline:0;
 background-color:#32486d;
 -webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.3),0 0 4px 1px rgba(255,255,255,0.6);
 box-shadow:inset 0 1px 2px rgba(0,0,0,0.3),0 0 4px 1px rgba(255,255,255,0.6)
}


.login-inputar {
 display:block;
 width:100%;
 height:140px;
 margin-bottom:20px;
 padding:0 9px;
 color:#fff;
 text-shadow:0 1px #000;
        resize: none;
 text-align:right;
 background:#2b3e5d;
 border:1px solid #15243b;
 border-top-color:#0d1827;
 border-radius:4px;
 background-image:-webkit-linear-gradient(top,rgba(0,0,0,0.35),rgba(0,0,0,0.2) 20%,rgba(0,0,0,0));
 background-image:-moz-linear-gradient(top,rgba(0,0,0,0.35),rgba(0,0,0,0.2) 20%,rgba(0,0,0,0));
 background-image:-o-linear-gradient(top,rgba(0,0,0,0.35),rgba(0,0,0,0.2) 20%,rgba(0,0,0,0));
 background-image:linear-gradient(to bottom,rgba(0,0,0,0.35),rgba(0,0,0,0.2) 20%,rgba(0,0,0,0));
 -webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.3),0 1px rgba(255,255,255,0.2);
 box-shadow:inset 0 1px 2px rgba(0,0,0,0.3),0 1px rgba(255,255,255,0.2)
}
.login-inputar:focus {
 outline:0;
 background-color:#32486d;
 -webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.3),0 0 4px 1px rgba(255,255,255,0.6);
 box-shadow:inset 0 1px 2px rgba(0,0,0,0.3),0 0 4px 1px rgba(255,255,255,0.6)
}

.lt-ie9 .login-input {
 line-height:35px
}
.login-submit {
 display:block;
 width:100%;
 height:37px;
 margin-bottom:15px;
 font-size:14px;
 font-weight:700;
 color:#294779;
 text-align:center;
 text-shadow:0 1px rgba(255,255,255,0.3);
 background:#adcbfa;
 background-clip:padding-box;
 border:1px solid #284473;
 border-bottom-color:#223b66;
 border-radius:4px;
 cursor:pointer;
 background-image:-webkit-linear-gradient(top,#d0e1fe,#96b8ed);
 background-image:-moz-linear-gradient(top,#d0e1fe,#96b8ed);
 background-image:-o-linear-gradient(top,#d0e1fe,#96b8ed);
 background-image:linear-gradient(to bottom,#d0e1fe,#96b8ed);
 -webkit-box-shadow:inset 0 1px rgba(255,255,255,0.5),inset 0 0 7px rgba(255,255,255,0.4),0 1px 1px rgba(0,0,0,0.15);
 box-shadow:inset 0 1px rgba(255,255,255,0.5),inset 0 0 7px rgba(255,255,255,0.4),0 1px 1px rgba(0,0,0,0.15)
}
.login-submit:active {
 background:#a4c2f3;
 -webkit-box-shadow:inset 0 1px 5px rgba(0,0,0,0.4),0 1px rgba(255,255,255,0.1);
 box-shadow:inset 0 1px 5px rgba(0,0,0,0.4),0 1px rgba(255,255,255,0.1)
}
.login-p {
 color:white;
 text-align:center;
 margin-bottom:5px
}
.Checkbox {
 color:white;
 text-align:lift;
 margin-bottom:5px
}
.login-error {
 text-align:center;
 color:#A30205;
 margin-bottom:5px
}
.image {
 border:1px solid #15243b;
 border-top-color:#0d1827;
 border-radius:4px;
        width:100%;
}
.footer {
 text-align:center;
 color:white
}
@media (max-width:320px) {
 .login {
  width: 220px
 }
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>User Authentication</title>
  <link rel="stylesheet" href="captiveportal-style.css">
  <!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<form method="post" action="$PORTAL_ACTION$" class="login">
 <h1>شروط وأحكام الإستخدام<br>Terms of Use</h1>
        <img src="tav.png" class="image" >
 
 <p class="login-p"><br>
  للإستمرار الرجاء قراءة وقبول الشروط والأحكام أدناه <br>To continue please read and accept the following terms
 </p>
 

 <textarea class="login-inputar" readonly dir="rtl">
1. الشرط أو البند الاول 
2. الشرط أو البند الثاني
3. الشرط أو البند الثالث
4. الشرط أو البند الرابع
5. الشرط أو البند الخامس
1. الشرط أو البند الاول 
2. الشرط أو البند الثاني
3. الشرط أو البند الثالث
4. الشرط أو البند الرابع
5. الشرط أو البند الخامس </textarea>


 <textarea class="login-input" readonly>
1.First condition
2.Second condition
3.Third condition
4.Fourth condition
5.Fifth condition
1.First condition
2.Second condition
3.Third condition
4.Fourth condition
5.Fifth condition </textarea>


    <input type="checkbox" class="checkbox" id="the-terms" />Accept - قبول
    <br>
    <br>
    <input class="login-submit" type="submit" value="Continue | إستمرار" id="submitBtn" disabled="disabled"/>
 <script type='text/javascript' src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
    var the_terms = $("#the-terms");

    the_terms.click(function() {
        if ($(this).is(":checked")) {
            $("#submitBtn").removeAttr("disabled");
        } else {
            $("#submitBtn").attr("disabled", "disabled");
        }
    });
});  
</script>



  
 <p class="footer">
  © 2015 Powered by <a href="http://www.tavit.aero">TAV-IT</a>.
 </p>
</form>
</body>
</html>
halfer
  • 19,824
  • 17
  • 99
  • 186
Eng. Saleh
  • 11
  • 1
  • 4

2 Answers2

2

If your are looking for a CSS solution, try ::-webkit-scrollbar

Sample CSS:

::-webkit-scrollbar {
width: 8px;
background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #a9a9a9;
}

But this only work for WebKit browsers.

For cross-browser alternative, use Tiny Scrollbar which is a jQuery plugin

Code implementation:

<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.tinyscrollbar.js"></script>
<script type="text/javascript">
     $(document).ready(function(){
        $(".login-inputar, .login-input").tinyscrollbar();
     });
</script>

Source

RockMyAlgorithm
  • 516
  • 1
  • 4
  • 14
1

Old question but had the same myself, so I wanted to share my findings and also answer the OP's question directly. First, as @RockMyAlgorithm said, you can use ::-webkit-scrollbar CSS selector to apply scrollbar styling for webkit browsers (Chrome, Edge, Safari and Opera). You can find the entire list of webkit scrollbar selectors here: https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar

For Firefox, and after v64, there is a CSS attribute for changing the width but it is limited to some generic options (thin/auto/none) and it is still listed as experimental.

With regards to implementing scrollbar styling on a specific element, you can apply the webkit selectors on an id, class, html element etc. For your specific case which is to reduce the width of the scrollbar for the text area, that would look like:

/*For webkit browsers*/
.login-inputar::-webkit-scrollbar {
    width: 5px; /* change based on your needs */
}

/*For Mozilla Firefox, you have create a new class or extend the login-inputar class*/
.login-inputar {
    scrollbar-width: thin;
}

In Internet Explorer, there is no option to customize width of the scrollbar, albeit, you can customize other options such as the color. See this excellent answer (thanks @0xcaff for sharing), for Internet Explorer and a more in-depth overview of the scrollbar styling options CSS customized scroll bar in div

A more holistic approach, in terms of cross-browser compatibility and range of options, will be to use a plugin. Some, that are actively maintained at the time this answer is written, are:

faremal
  • 50
  • 2
  • 6