前面的星号是灰色，没有输入是文本框会变成红色-Go服务器开发

如果你希望在文本框未输入内容时，星号变为红色并且文本框的边框也变为红色，可以使用 CSS 和 JavaScript 进行样式处理和验证。以下是一个示例，展示了如何实现这些功能：

HTML 代码

<div class="row" style="margin-top: 7px;">
    <div class="col-md-4" style="overflow-wrap: break-word;">
        <label for="committedRepaymentAmount" class="control-label col-sm-4"
               style="display: inline-block; white-space: nowrap; text-align: left; padding-top: 7px;">
            系诺还款金额<span class="required-star">*</span>
        </label>
        <div class="orientation col-sm-8" style="padding-left: 0; padding-right: 0;">
            <input type="text" id="committedRepaymentAmount" class="form-control"
                   value="${dataInfo.committedRepaymentAmount || ''}" required />
        </div>
    </div>
</div>
<br/>

CSS 样式

.required-star {
    color: gray; /* 默认颜色为灰色 */
}
input.invalid {
    border-color: red; /* 文本框边框变成红色 */
}
input.valid {
    border-color: initial; /* 重置边框颜色 */
}

JavaScript 校验

document.querySelector('form').addEventListener('submit', function(event) {
    var input = document.getElementById('committedRepaymentAmount');
    
    if (!input.value) {
        // 如果没有输入值，显示错误效果
        input.classList.add('invalid'); // 添加无效类
        input.classList.remove('valid'); // 移除有效类
        document.querySelector('.required-star').style.color = 'red'; // 星号变红
        alert('请填写系诺还款金额');
        event.preventDefault(); // 阻止表单提交
    } else {
        // 如果有输入值，清理错误效果
        input.classList.remove('invalid'); // 移除无效类
        input.classList.add('valid'); // 添加有效类
        document.querySelector('.required-star').style.color = 'gray'; // 恢复星号颜色
    }
});

实现说明：

CSS：
- .required-star 用于定义星号的默认颜色为灰色。
- input.invalid 定义了文本框未填时的样式（边框颜色为红色）。
- input.valid 可用于重置输入框的样式。
JavaScript：
- 当用户提交表单时，如果输入为空，则给输入框添加 invalid 类，并移除 valid 类，同时将星号设置为红色，并弹出警告提示。
- 如果输入不为空，则会移除 invalid 类，并添加 valid 类，恢复星号的颜色。