我想将textareas的滚动条更改为一个小滚动条而不是默认滚动条。我是HTML和CSS的初学者，所以我无法改变它，而不是特定元素（Textarea）。
屏幕截图：
我的代码：
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>
答案 0 :(得分：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>
答案 1 :(得分：0)
老问题，但我自己也有同样的问题，所以我想分享我的发现并直接回答 OP 的问题。首先，正如@RockMyAlgorithm 所说，您可以使用 ::-webkit-scrollbar CSS 选择器为 webkit 浏览器（Chrome、Edge、Safari 和 Opera）应用滚动条样式。您可以在此处找到完整的 webkit 滚动条选择器列表：https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar
对于 Firefox，在 v64 之后，有一个用于更改宽度的 CSS 属性，但它仅限于一些通用选项（thin/auto/none），并且它仍被列为实验性的。
关于在特定元素上实现滚动条样式，您可以在 id、class、html 元素等上应用 webkit 选择器。对于要减少文本区域滚动条宽度的特定情况，这将看起来像：
/*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;
}
在 Internet Explorer 中，没有自定义滚动条宽度的选项，但您可以自定义其他选项，例如颜色。请参阅此优秀答案（感谢 @0xcaff 的分享）、Internet Explorer 以及滚动条样式选项的更深入概述 CSS customized scroll bar in div
在跨浏览器兼容性和选项范围方面，更全面的方法是使用插件。在撰写此答案时积极维护的一些是：