如何删除点击input输入框时出现的黑色外边框？

点击输入框时出现的黑色外边框是浏览器自带的默认焦点轮廓，由outline属性控制，你可以通过添加.forms类的聚焦状态CSS规则移除它：

.forms {
    margin-bottom: 30px;
    font-size: 20px;
    color: blue;
    padding: 0px;
    padding-bottom: 14px;
    width: 440px;
    border: none;
    background-color: transparent;
    border-bottom: 4px solid black;
}
/* 新增如下聚焦样式规则 */
.forms:focus {
    outline: none;
}
.forms::placeholder {
    color: rgba(0, 41, 255, 0.42);
}

如果担心移除默认焦点轮廓会影响键盘导航用户的使用体验（无法快速定位当前聚焦的输入框），也可以自定义聚焦状态样式替代默认轮廓，比如修改下边框颜色：

.forms:focus {
    outline: none;
    border-bottom-color: #0029ff;
}

内容的提问来源于stack exchange，提问作者Walid Cherhane