css input

/* 示例代码：使用 CSS 样式化 input 元素 */

input[type="text"] {
    /* 设置输入框的宽度 */
    width: 200px;

    /* 设置输入框的高度 */
    height: 30px;

    /* 设置输入框的边框样式 */
    border: 2px solid #ccc;

    /* 设置输入框的圆角 */
    border-radius: 5px;

    /* 设置输入框的内边距 */
    padding: 5px;

    /* 设置输入框的字体大小 */
    font-size: 16px;
}

input[type="text"]:focus {
    /* 当输入框获得焦点时，改变边框颜色 */
    border-color: #007BFF;

    /* 添加一个轻微的阴影效果 */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

解释说明：

• input[type="text"]：选择所有类型为 text 的 <input> 元素。
• width 和 height：设置输入框的宽度和高度。
• border：定义输入框的边框样式、宽度和颜色。
• border-radius：使输入框的四个角变圆。
• padding：在输入框的内容和边框之间添加一些空间。
• font-size：设置输入框内的文本大小。
• input[type="text"]:focus：当用户点击或聚焦到输入框时应用这些样式，例如改变边框颜色和添加阴影效果。