input css

/* 示例代码：input 样式 */

/* 基本的 input 样式 */
input {
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
}

/* 聚焦时的样式 */
input:focus {
    border-color: #007BFF;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

/* 禁用状态的样式 */
input:disabled {
    background-color: #e9ecef;
    opacity: 0.6;
}

/* 错误状态的样式 */
input.error {
    border-color: #dc3545;
    box-shadow: 0 0 5px rgba(220, 53, 69, 0.5);
}

解释说明：

1. 基本样式：设置了 input 元素的基础样式，包括内边距、字体大小、边框、圆角和宽度。
2. 聚焦样式：当用户点击或通过 Tab 键聚焦到 input 元素时，改变边框颜色并添加阴影效果，提升用户体验。
3. 禁用样式：当 input 元素被禁用时，背景色变浅且透明度降低，表示不可交互。
4. 错误样式：当 input 元素处于错误状态（例如验证失败）时，边框颜色变为红色，并添加红色阴影以突出显示错误。