CSS 美化输入框：文本框和文本区域样式代码

CSS 美化输入框：文本框和文本区域样式代码

以下是一个简单的 CSS 样式代码，可以美化文本框和文本区域：

input[type='text'], input[type='password'], textarea {
    border: none; /* 去除边框 */
    border-radius: 5px; /* 圆角边框 */
    padding: 10px; /* 内边距 */
    font-size: 16px; /* 字体大小 */
    color: #333; /* 字体颜色 */
    background-color: #f2f2f2; /* 背景颜色 */
}

input[type='text']:focus, input[type='password']:focus, textarea:focus {
    outline: none; /* 去除聚焦时的边框 */
    box-shadow: 0 0 5px #ccc; /* 添加聚焦时的阴影效果 */
}

你可以将上述代码添加到你的 CSS 文件中，或者在 HTML 文件中使用内联 CSS 样式。

例如，在 HTML 文件中使用内联 CSS 样式：

<input type='text' style='border: none; border-radius: 5px; padding: 10px; font-size: 16px; color: #333; background-color: #f2f2f2;' />

注意：上述样式仅适用于文本框和文本区域。如果要应用于其他输入类型，例如单选框、复选框或下拉列表框，请根据需要进行修改。