点击SUBMIT按钮触发错误时，如何将输入框设为红色？

嘿，看你已经在PHP代码里做好了关键的逻辑判断——当有错误时给对应的表单容器加上has-error类，接下来只需要加几行CSS就能实现输入框变红的效果啦！

步骤1：添加CSS样式 #

在你的样式文件（或者页面的<style>标签里）加入以下代码：

/* 给有错误的输入框加红色边框 */
.form-group.has-error input {
    border: 2px solid #dc3545; /* 这是常用的危险提示红色，你可以替换成任意喜欢的红色值 */
    /* 可选：添加浅红色背景，让错误更醒目 */
    /* background-color: #ffebee; */
}

/* 可选：优化错误提示文字的样式 */
.error {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

为什么这样有效？ #

你的PHP代码已经实现了核心逻辑：当$error_user、$error_taken等错误变量不为空时，会给对应的.form-group容器加上has-error类。上面的CSS会自动选中这些容器里的<input>元素，把它的边框改成红色，完美匹配你的错误触发场景。

效果验证 #

当你点击提交按钮触发错误时，PHP会渲染出带有has-error类的表单容器，比如：

<div class="form-group has-error">
    <strong>Username: *</strong>
    <input type="text" name="username" value="test" />
    <span class="error">用户名已存在</span><br/>
</div>

此时CSS就会自动把这个输入框的边框变成红色啦！

内容的提问来源于stack exchange，提问作者T x