要在用户输入内容时改变输入框的边框颜色，可以使用CSS和HTML。这里使用CSS伪类 :focus 和 :valid，以及HTML5的 required 属性来实现此效果。
/* 初始状态的输入框样式 */
input {
border: 2px solid #ccc;
padding: 8px;
font-size: 16px;
outline: none; /* 移除默认的聚焦边框 */
}
/* 输入框获取焦点时的边框颜色 */
input:focus {
border-color: #66afe9;
}
/* 输入框有内容时的边框颜色 */
input:valid {
border-color: #28a745;
}
/* 输入框有内容时的边框颜色 */
input:not(:placeholder-shown) {
border-color: #28a745;
}
/* 输入框内容无效时的边框颜色 */
input:invalid {
border-color: #dc3545;
}
<div>
<label for=”inputField”>Enter something:</label>
<input id=”inputField” required=”” type=”text” />
</div>