html滚动条 textarea属性设置

当前位置：首页> 范文|应用文> IT技术专栏> 网页制作

来源：阅读：1878 次日期：2016-06-21 14:14:56

温馨提示：小编为您整理了“html滚动条 textarea属性设置”,方便广大网友查阅！

本文介绍html滚动条 textarea属性设置:overflow内容溢出时的设置,scrollbar-3d-light-color立体滚动条亮边的颜色等等相关设置,有需要的朋友可以详细参考下，希望对你们有帮助

1．overflow内容溢出时的设置（设定被设定对象是否显示滚动条）

overflow-x水平方向内容溢出时的设置

overflow-y垂直方向内容溢出时的设置

以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。

2．scrollbar-3d-light-color立体滚动条亮边的颜色（设置滚动条的颜色）

scrollbar-arrow-color上下按钮上三角箭头的颜色

scrollbar-base-color滚动条的基本颜色

scrollbar-dark-shadow-color立体滚动条强阴影的颜色

scrollbar-face-color立体滚动条凸出部分的颜色

scrollbar-highlight-color滚动条空白部分的颜色

scrollbar-shadow-color立体滚动条阴影的颜色

我们通过几个实例来讲解上述的样式属性：

1.让浏览器窗口永远都不出现滚动条

没有水平滚动条

代码如下:

没有垂直滚动条

代码如下:

没有滚动条

代码如下:

或

2.设定多行文本框的滚动条

没有水平滚动条

代码如下:

< /textarea></p> <p>没有垂直滚动条</p> <p><font color="#ee1111">代码如下:</font></p> <p>< textarea style="overflow-y:hidden">< /textarea></p> <p>没有滚动条</p> <p><font color="#ee1111">代码如下:</font></p> <p><textarea style="overflow-x:hidden;overflow-y:hidden">< /textarea></p> <p>或< textarea style="overflow:hidden">< /textarea></p> <p>3.设定窗口滚动条的颜色</p> <p>设置窗口滚动条的颜色为红色<body style="scrollbar-base-color:red"></p> <p>scrollbar-base-color设定的是基本色，一般情况下只需要设置这一个属性就可以达到改变滚动条颜色的目的。</p> <p>加上一点特别的效果：</p> <p><font color="#ee1111">代码如下:</font></p> <p><body style="scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon"></p> <p>4.在样式表文件中定义好一个类，调用样式表</p> <p><font color="#ee1111">代码如下:</font></p> <p><style></p> <p>.coolscrollbar{scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon;}</p> <p></style></p> <p>这样调用：</p> <p><font color="#ee1111">代码如下:</font></p> <p><textarea class="coolscrollbar">< /textarea></p> <p>textarea颜色及边框设置：</p> <p><font color="#ee1111">代码如下:</font></p> <p><textarea style="border:red solid;border-width:1 1 1 1;color:#CCCCCC;">< /textarea></p> </div> <div class="c_nrgg"></div> <div class="c_nrgdd"> 更多信息请查看 <a href="//www.reelogic.com/c2022.aspx">网页制作</a> </div> <div class="c_nrgdd"></div> <div class="c_nrgdd"> <a href="//www.reelogic.com/memberNewsAdd.aspx">【点此处就本文及相关问题在本站进行非正式的简要咨询（便捷快速）】</a> <a href="//www.reelogic.com/n4836c56.aspx">【点此处查询各地各类考试咨询QQ号码及交流群】</a> </div> <div class="c_nrgdds"> 上一篇： <a href="//www.reelogic.com/n1449585c2022.aspx">flash嵌入html 在html网页代码中嵌入Flash文件的解决方案(上)</a> </div> <div class="c_nrgdds"> 下一篇： <a href="//www.reelogic.com/n1449591c2022.aspx">html 中文乱码 HTML超链接中文乱码问题分析及解决方法</a> </div> <div class="c_nrgdds"> 手机网站地址： <a href="//www.reelogic.com/wap/n1449587c2022.aspx">html滚动条 textarea属性设置</a> </div> <div class="c_nrgdd"> 由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！ </div> <div class="c_nrtja"> <div class="c_nrtja1"> <span class="c_nrtja2">相关阅读</span> <a href="//www.reelogic.com/c2022.aspx">网页制作</a> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1970477c2022.aspx">使用CSS制作立体导航栏</a></span> <span class="c_nrtja5" style="color:gray;">10月30日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1970472c2022.aspx">用纯CSS3实现网页中常见的小箭头</a></span> <span class="c_nrtja5" style="color:gray;">10月30日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1970468c2022.aspx">有关HTML5中背景音乐的自动播放功能</a></span> <span class="c_nrtja5" style="color:gray;">10月30日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1970466c2022.aspx">HTML5、Select下拉框右边加图标的实现代码(增进用户体验)</a></span> <span class="c_nrtja5" style="color:gray;">10月30日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1970462c2022.aspx">html5实现图片转圈的动画效果——让页面动起来</a></span> <span class="c_nrtja5" style="color:gray;">10月30日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1970458c2022.aspx">html5清空画布方法(三种)</a></span> <span class="c_nrtja5" style="color:gray;">10月30日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1970455c2022.aspx">HTML实现移动端固定悬浮半透明搜索框</a></span> <span class="c_nrtja5" style="color:gray;">10月30日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1970452c2022.aspx">HTML5 文件域+FileReader 分段读取文件并上传到服务器</a></span> <span class="c_nrtja5" style="color:gray;">10月30日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1970450c2022.aspx">Dreamweaver怎么设计彩色边框的表格?</a></span> <span class="c_nrtja5" style="color:gray;">10月30日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1970449c2022.aspx">Dreamweaver怎么给个人简历添加照片并排版?</a></span> <span class="c_nrtja5" style="color:gray;">10月30日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1970445c2022.aspx">基于HTML5的WebGL实现json和echarts图表展现在同一个界面</a></span> <span class="c_nrtja5" style="color:gray;">10月30日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1970444c2022.aspx">解决HTML5手机端页面缩放的问题</a></span> <span class="c_nrtja5" style="color:gray;">10月30日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1949732c2022.aspx">利用纯CSS实现居中的七大方法示例</a></span> <span class="c_nrtja5" style="color:gray;">09月29日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1949729c2022.aspx">CSS3中伪元素::before和::after的用法示例</a></span> <span class="c_nrtja5" style="color:gray;">09月29日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1949727c2022.aspx">详解使用 CSS 的 font-size-adjust 属性改善网页排版</a></span> <span class="c_nrtja5" style="color:gray;">09月29日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1949725c2022.aspx">HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)</a></span> <span class="c_nrtja5" style="color:gray;">09月29日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1949723c2022.aspx">css3 pointer-events 介绍详解</a></span> <span class="c_nrtja5" style="color:gray;">09月29日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1949721c2022.aspx">CSS :focus-within的具体使用</a></span> <span class="c_nrtja5" style="color:gray;">09月29日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1949718c2022.aspx">你所不知道的 CSS 动画技巧与细节</a></span> <span class="c_nrtja5" style="color:gray;">09月29日</span> </div> <div class="c_nrtja3"> <span class="c_nrtja4"><a href="//www.reelogic.com/n1949717c2022.aspx">详解CSS3选择器:nth-child和:nth-of-type之间的差异</a></span> <span class="c_nrtja5" style="color:gray;">09月29日</span> </div> </div> </div> </div> <div class="c_lbright_nr"> <div class="c_nr_lbxx1"> <div class="c_lbright_nr1bt1s"> <a href="//www.reelogic.com/wap/"> 移动网站</a> </div> </div> <style> /**enroll**/ .enroll_out { width:260px; float:left; } .enroll_wrap { background: rgba(255, 232, 232, 1); padding: 20px 20px 10px 10px; box-sizing: border-box; border-radius:4px; margin-bottom:10px; } .enroll_title { color: #ff4e00; font-size: 17px; margin-bottom: 18px; margin-left: 10px; } .enroll_wrap li { margin-bottom: 12px; } .enroll_li { display: flex; align-items: center; } .enroll_list { padding:0px; margin:0px; } .enroll_list span { display: inline-block; width: 88px; text-align: right; margin-right: 10px; color: #666; font-size:14px; } .enroll_list .info { background: #fff; border: 1px solid rgba(217, 217, 217, 1); width:78%; } .enroll_list input:focus { outline: none; } .enroll_list .info.selType { background: #fff url(https://www.ynhfpx.com/static/common/img/select_bg.png) no-repeat 95% center; appearance: none; -moz-appearance: none; -webkit-appearance: none; padding-left: 5px; width:80%; } .enroll_wrap input, .enroll_wrap select, .enroll_wrap option { border-radius: 2px; height: 36px; line-height: 36px; } .enroll_list .code_dh { width: 60px; margin-right: 10px; border: 1px solid rgba(217, 217, 217, 1); } .enroll_list .pl5 { padding-left: 5px; } .getCode { background: #00CE7F; text-align: center; color: #fff; width: 90px; border:none; } .code_get_dh { } #enrollBtn { background: linear-gradient(to right, #ec665c, #f07549, #f6892e); text-align: center; box-shadow: 0 4px 10px #f8dcdc; width: 100%; line-height: 50px; height: 50px; color: #fff; font-size: 16px; margin-left: 5px; margin-top: 10px; border:none; } .enroll_list li { list-style-type:none; } </style> <div class="enroll_out"> <div class="enroll_wrap"> <form action="" id="myform"> <p class="enroll_title">2026国考·省考课程试听报名</p> <ul class="enroll_list"> <li class="enroll_li"><span>报班类型</span><select name="class" id="class" class="info selType"><option value="">请选择报班类型</option><option value="网课班299">网课班299</option><option value="全年巅峰班16800">全年巅峰班16800</option><option value="全年通关班16800">全年通关班16800</option><option value="联报班12800">联报班12800</option><option value="省考笔试全程班7800">省考笔试全程班7800</option><option value="省考笔试+面试班9800">省考笔试+面试班9800</option><option value="省考笔试+事业单位笔试9800">省考笔试+事业单位笔试9800</option><option value="省考基础班4980">省考基础班4980</option></select></li> <li class="enroll_li"><span>姓名</span><input class="info pl5" type="text" name="uname" id="uname" placeholder="姓名"></li> <li class="enroll_li"><span>手机号</span><input class="info pl5" type="text" name="tel" id="tel" placeholder="手机号"></li> <li class="enroll_li"><span>验证码</span><input class="code_dh pl5" type="text" name="code_tel" id="code_dh" placeholder="验证码"><input class="getCode code_get_dh" type="button" value="获取验证码"></li> <li><input type="hidden" name="formid" value="1"><input type="hidden" name="fuid" value="1"><input type="button" class="enrollBtn" id="enrollBtn" value="提交预约"></li> </ul> </form> </div> </div> <div class="c_nr_lbxx1"> <div class="c_lbright_nr1bt1"> 最新信息 </div> <div class="c_nr_lbxx_tui"> <div class="c_nr_xx_tui1"> <a href="//www.reelogic.com/n2309087c994.aspx">2025年红河州第四人民医院（红河州传染病医院）编外人员招聘公告</a> </div> <div class="c_nr_xx_tui1"> <a href="//www.reelogic.com/n2309086c1180.aspx">2025年4月云南安宁产业园区企业招聘公告</a> </div> <div class="c_nr_xx_tui1"> <a href="//www.reelogic.com/n2309085c991.aspx">2025年玉溪市澄江市社会保险中心招聘城镇公益性岗位公告</a> </div> <div class="c_nr_xx_tui1"> <a href="//www.reelogic.com/n2309084c1004.aspx">2025年临沧市沧源县检验检测所招聘编外聘用人员公告</a> </div> <div class="c_nr_xx_tui1"> <a href="//www.reelogic.com/n2309083c1004.aspx">2025年临沧市网络安全应急和网络舆情信息研究中心（市委网信办）招聘公告</a> </div> <div class="c_nr_xx_tui1"> <a href="//www.reelogic.com/n2309082c1100.aspx">2025年大理州考试录用公务员面试及后续工作安排公告</a> </div> <div class="c_nr_xx_tui1"> <a href="//www.reelogic.com/n2309081c994.aspx">2025年4月红河州工业和信息化局招聘公益性岗位公告</a> </div> <div class="c_nr_xx_tui1"> <a href="//www.reelogic.com/n2309080c990.aspx">2025年曲靖市泽济中学遴选工作人员面试方案</a> </div> <div class="c_nr_xx_tui1"> <a href="//www.reelogic.com/n2309079c992.aspx">2025年昭通市正道中学招生工作人员招聘简章</a> </div> <div class="c_nr_xx_tui1"> <a href="//www.reelogic.com/n2309078c992.aspx">2025年昭通市昭阳区残疾人联合会招聘城镇公益性岗位工作人员公告</a> </div> </div> </div> <div class="c_nr_lbxx1"></div> <div class="c_nr_lbcd"> <div class="c_nr_cd1"> <img id="xlogo" src="//www.reelogic.com/pic/gwy.svg" width="20" height="20">公考类 </div> <div class="c_nr_cd2"> <span class="c_nr_cd3"><a href="//www.reelogic.com/c1072.aspx">云南公务员</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c1220.aspx">贵州公务员</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c1219.aspx">四川公务员</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c1311.aspx">广西公务员</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c1252.aspx">各省公务员</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c1015.aspx">国家公务员</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c1253.aspx">选调遴选</a></span> </div> <div class="c_nr_cd1"> <img id="xlogo" src="//www.reelogic.com/pic/zp.svg" width="20" height="20">招聘类 </div> <div class="c_nr_cd2"> <span class="c_nr_cd3"><a href="//www.reelogic.com/c934.aspx">188app金宝搏 </a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c1431.aspx"></a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c1110.aspx">特岗教师</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c1291.aspx">三支一扶</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c1291.aspx">志愿者</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c1448.aspx">银行招聘</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c1124.aspx">国企招聘</a></span> </div> <div class="c_nr_cd1"> <img id="xlogo" src="//www.reelogic.com/pic/ks.svg" width="20" height="20">各类考试 </div> <div class="c_nr_cd2"> <span class="c_nr_cd3"><a href="//www.reelogic.com/c690.aspx">学历升学</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c385.aspx"></a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c921.aspx">职业资格</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c373.aspx">外语考试</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c375.aspx">医学考试</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c225.aspx">工程考试</a></span> <span class="c_nr_cd3"><a href="//www.reelogic.com/c823.aspx">教师资格</a></span> </div> </div> </div> </div>  <div class="c_gywm"> <a href="//www.reelogic.com/n38c56.aspx" target="_blank">关于我们</a>| <a href="//www.reelogic.com/n76555c56.aspx" target="_blank">联系我们</a>| <a href="//www.reelogic.com/n340264c1277.aspx" target="_blank">人才招聘</a>| <a href="//www.reelogic.com/n3452c56.aspx" target="_blank">网站声明</a>| <a href="//www.reelogic.com/n2514c56.aspx" target="_blank">网站帮助</a>| <a href="//www.reelogic.com/memberNewsAdd.aspx" target="_blank">非正式的简要咨询</a>| <a href="//www.reelogic.com/n21580c56.aspx" target="_blank">简要咨询须知</a>| <a href="//www.reelogic.com/n4836c56.aspx" target="_blank">新媒体/短视频平台</a>| <a href="//www.reelogic.com/wap" target="_blank">手机站点</a>| <a href="https://www.ynbxjy.com/tsjy.html" target="_blank">投诉建议</a> </div> <div class="c_gywm"> <span>工业和信息化部备案号：<a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">滇ICP备2023014141号-1</a></span> <span><a href="//www.reelogic.com/n48442c56.aspx" target="_blank">云南省教育厅备案号：云教ICP备0901021</a></span> <span><a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=53010202001879" target="_blank" rel="nofollow">滇公网安备53010202001879号</a></span> <span>人力资源服务许可证：（云）人服证字（2023）第0102001523号</span> </div> <div class="c_gywm1"> <div class="c_ga_1" style="width:200px;"> <a href="http://www.yn.cyberpolice.cn:81/RecValidate/RecView.aspx?RecordID=53010203402261" target="_blank" class="wjba" rel="nofollow"><img src="//www.reelogic.com/pic/gonganbeian.jpg" border="0" alt="云南网警备案专用图标" width="45" height="50"></a> </div> <div class="c_ga_2" style="width:700px;"> <span>联系电话：0871-65099533/13759567129</span> <span>获取招聘考试信息及咨询关注公众号：</span> <br> <span>咨询QQ：1093837350（9:00—18:00）</span> <span>版权所有:<span style="font-weight: bold; font-family: arial;" id="iwms_cp"><a href="//www.reelogic.com"></a></span></span> </div> <div class="c_ga_3" style="width:200px;"> <a href="http://www.yn.cyberpolice.cn/" target="_blank" class="wjbj" rel="nofollow"><img src="//www.reelogic.com/pic/gonganbj.jpg" border="0" alt="云南网警报警专用图标" width="48" height="52"></a> </div> </div>  <div style="text-align:center;margin-bottom:5px;"><form action="http://www.baidu.com/baidu" target="_blank"><div bgcolor="#FFFFFF" style="text-align:center;"><input name="tn" type="hidden" value="baidu"><a href="http://www.baidu.com/"><img src="http://img.baidu.com/img/logo-80px.gif" width="80px" height="29px" alt="Baidu" align="bottom" border="0"></a><input type="text" name="word" size="30" placeholder="" value=""><input type="submit" value="baidu"></div></form></div><div id="so360" style="text-align:center;margin-bottom:5px;"><form action="https://www.so.com/" target="_blank" id="so360form"><img src="http://p1.qhimg.com/d/_onebox/search.png" width="100px" height="25px"> <input type="text" autocomplete="off" name="q" id="so360_keyword" placeholder="" value=""> <input type="submit" id="so360_submit" value="360"> <input type="hidden" name="ie" value="gbk"><input type="hidden" name="src" value="zz"> <input type="hidden" name="site" value="so.com"> <input type="hidden" name="rg" value="1"></form></div><div id="sogou" style="text-align:center;margin-bottom:5px;"><form action="https://www.sogou.com/" target="_blank" id="so360form"><img src="https://www.sogou.com/web/index/images/logo_440x140.v.4.png" width="100px" height="25px"> <input type="text" autocomplete="off" name="q" id="sogou.com_keyword" placeholder="" value=""> <input type="submit" id="sogou_submit" value="sougou"> <input type="hidden" name="ie" value="gbk"><input type="hidden" name="src" value="zz"> <input type="hidden" name="site" value="so.com"> <input type="hidden" name="rg" value="1"></form></div><div align="center"><a target="_blank" href="/sitemap.xml">map</a></div></body> </html>