CSS按钮莫名出现黑边框问题求助（附代码）

你看到的黑边框是浏览器给<button>元素设置的默认边框样式，同时按钮在聚焦（比如点击后）还会出现默认的轮廓线。只需要在你的.slider-button类里添加两个属性就能解决：

.slider-button {
    background-color: #F5F8FA;
    width: auto;
    height: 75rpx;
    border-radius: 50rpx;

    display: flex;
    justify-content: center;
    align-items: center;

    color: black;
    
    /* 添加以下两行 */
    border: none; /* 移除默认边框 */
    outline: none; /* 移除聚焦时的默认轮廓线 */
}

补充说明： #

如果需要兼顾可访问性（比如键盘导航时的聚焦提示），可以自定义聚焦样式，避免完全移除轮廓导致导航体验下降：

.slider-button:focus {
    outline: 2px solid #ccc; /* 自定义浅色聚焦轮廓 */
}

内容的提问来源于stack exchange，提问作者Aziz Mlayel