javascript - 如何将textarea的默认滚动条改为小滚动条？

Question

我想将我的文本区域的滚动条更改为一个小滚动条而不是默认滚动条。我是 HTML 和 CSS 的初学者，所以当它针对特定元素 (Textarea) 时我无法更改它。

屏幕截图:

enter image description here

我的代码:

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>

Answer 1

如果您正在寻找 CSS 解决方案，请尝试 ::-webkit-scrollbar

示例 CSS:

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

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

但这只适用于 WebKit 浏览器。

对于跨浏览器替代方案，请使用 Tiny Scrollbar这是一个 jQuery 插件

代码实现:

<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