通过css的::-webkit-scrollbar-button伪元素可自定义滚动条两端按钮样式，适用于chrome、edge等Webkit内核浏览器，支持设置显示状态、尺寸、背景、边框及箭头图标，也可隐藏按钮以简化外观，但该方法不兼容firefox和部分safari版本，多浏览器兼容需借助javaScript库。
修改html滚动条两端按钮的样式主要通过CSS自定义滚动条外观，特别是在Webkit内核浏览器（如Chrome、Edge）中可以通过伪元素来实现。虽然标准HTML没有直接提供对滚动条按钮的独立样式控制，但可以借助::-webkit-scrollbar系列伪元素来自定义包括按钮在内的各个部分。
1. 使用Webkit伪元素自定义滚动条按钮
在支持的浏览器中，可以通过以下伪元素控制滚动条两端的按钮：
- ::-webkit-scrollbar-button：代表滚动条两端的箭头按钮。
- 可以设置其显示状态、尺寸、背景色、边框等。
示例代码：
<font face="Courier New"> /* 整体滚动条 */ ::-webkit-scrollbar { width: 12px; } <p>/<em> 滚动条轨道 </em>/ ::-webkit-scrollbar-track { background: #f0f0f0; border-radius: 6px; }</p><p>/<em> 滚动条滑块 </em>/ ::-webkit-scrollbar-thumb { background: #c0c0c0; border-radius: 6px; }</p><p>/<em> 滚动条两端按钮 </em>/ ::-webkit-scrollbar-button { display: block; height: 10px; background-color: #e0e0e0; border: 1px solid #ccc; }</p><p>/<em> 向上按钮 </em>/ ::-webkit-scrollbar-button:vertical:start:decrement { background-image: url('data:image/svg+xml;utf8,<svg xmlns="<a href="https://www.php.cn/link/f1af9918adf75d2cfe2e87861a72f1f6">https://www.php.cn/link/f1af9918adf75d2cfe2e87861a72f1f6</a>" width="10" height="10" viewBox="0 0 10 10"><path fill="%23333" d="M5 8L0 3h10z"/></svg>'); background-repeat: no-repeat; background-position: center; background-color: #f5f5f5; }</p><p>/<em> 向下按钮 </em>/ ::-webkit-scrollbar-button:vertical:end:increment { background-image: url('data:image/svg+xml;utf8,<svg xmlns="<a href="https://www.php.cn/link/f1af9918adf75d2cfe2e87861a72f1f6">https://www.php.cn/link/f1af9918adf75d2cfe2e87861a72f1f6</a>" width="10" height="10" viewBox="0 0 10 10"><path fill="%23333" d="M5 2L0 7h10z"/></svg>'); background-repeat: no-repeat; background-position: center; background-color: #f5f5f5; } </font></p>
2. 隐藏或简化按钮样式
如果不需要显示按钮，可以直接隐藏：
立即学习“前端免费学习笔记（深入）”；
<font face="Courier New"> ::-webkit-scrollbar-button { display: none; } </font>
这样滚动条将只保留轨道和滑块，两端按钮不显示，视觉更简洁。
3. 兼容性说明与注意事项
- 上述方法仅适用于基于WebKit/Blink的浏览器（如Chrome、Edge、Opera），Firefox和Safari（旧版本）不支持这些伪元素。
- 目前无法用纯CSS完全跨浏览器统一滚动条按钮样式。
- 若需高度自定义且兼容多浏览器，可考虑使用javascript库（如SimpleBar、Perfect Scrollbar）模拟滚动条。
基本上就这些。通过::-webkit-scrollbar-button可以有效控制滚动条两端按钮的外观，适合在内部系统或对浏览器有要求的项目中使用。注意保持用户体验，避免按钮过小或难以点击。