|
@@ -0,0 +1,48 @@
|
|
|
|
|
+/**
|
|
|
|
|
+ * 输入框 复选框 CSS 样式
|
|
|
|
|
+ * Copyright (c) 2024
|
|
|
|
|
+ */
|
|
|
|
|
+
|
|
|
|
|
+/* 基本样式 */
|
|
|
|
|
+.input-styles {
|
|
|
|
|
+ /*display: block; /* 使其独占一行 */
|
|
|
|
|
+ width: 300px; /* 宽度为容器宽度 */
|
|
|
|
|
+ padding: 5px; /* 内边距 */
|
|
|
|
|
+ font-size: 16px; /* 字体大小 */
|
|
|
|
|
+ color: #333; /* 字体颜色 */
|
|
|
|
|
+ background-color: #fff; /* 背景颜色 */
|
|
|
|
|
+ border: 1px solid #ccc; /* 边框 */
|
|
|
|
|
+ border-radius: 4px; /* 圆角边框 */
|
|
|
|
|
+ outline: none; /* 移除轮廓 */
|
|
|
|
|
+ transition: all 0.3s ease; /* 过渡动画 */
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* 聚焦时的效果 */
|
|
|
|
|
+.input-styles:focus {
|
|
|
|
|
+ border-color: #55acee; /* 聚焦时边框颜色 */
|
|
|
|
|
+ box-shadow: 0 0 5px rgba(85, 170, 238, 0.5); /* 阴影效果 */
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* 输入框有内容时的效果 */
|
|
|
|
|
+.input-styles:not(:placeholder-shown) {
|
|
|
|
|
+ border-color: #5cb85c; /* 输入框有内容时边框颜色 */
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* 鼠标悬停时的效果 */
|
|
|
|
|
+.input-styles:hover {
|
|
|
|
|
+ border-color: #55acee; /* 悬停时边框颜色 */
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* 输入框禁用时的效果 */
|
|
|
|
|
+.input-styles:disabled {
|
|
|
|
|
+ background-color: #eee; /* 禁用时背景颜色 */
|
|
|
|
|
+ color: #999; /* 禁用时字体颜色 */
|
|
|
|
|
+ cursor: not-allowed; /* 禁用时鼠标光标 */
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* 已经改变过的下拉框样式 */
|
|
|
|
|
+.styled-input.changed {
|
|
|
|
|
+ border-color: #f6e5e5; /* 改变过的边框颜色 */
|
|
|
|
|
+ box-shadow: 0 0 5px rgba(85, 170, 238, 0.5); /* 改变过的阴影 */
|
|
|
|
|
+ background-color: rgb(232, 240, 254);
|
|
|
|
|
+}
|
