/**
 * 输入框 复选框 CSS 样式
 * Copyright (c) 2024
 */

/* 基本样式 */
.styled-input {
	/*display: block; /* 使其独占一行 */
	width: 300px; /* 宽度为容器宽度 */
	padding: 5px; /* 内边距 */
	font-size: 16px; /* 字体大小 */
	color: #333; /* 字体颜色 */
	/*background-color: #fff; !* 背景颜色 *!*/
	border: 1px solid; /* 边框 */
	border-radius: 4px; /* 圆角边框 */
	outline: none; /* 移除轮廓 */
	transition: all 0.3s ease; /* 过渡动画 */
}

/* 聚焦时的效果 */
.styled-input:focus {
	border-color: #55acee; /* 聚焦时边框颜色 */
	box-shadow: 0 0 5px rgba(85, 170, 238, 0.5); /* 阴影效果 */
}

/* 输入框有内容时的效果 */
/*.styled-input:not(:placeholder-shown) {
	border-color: #5cb85c; !* 输入框有内容时边框颜色 *!
}*/

/* 鼠标悬停时的效果 */
.styled-input:hover {
	border-color: #55acee; /* 悬停时边框颜色 */
}

/* 输入框禁用时的效果 */
.styled-input: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);
}
input{
	width: 15px;
}

input[type="text"]:focus {
	background-color: #55AAEE7F;
}
input[type="text"] {
	background-color: #fff;
}
input[type="text"] {
	transition: background-color 0.3s ease; /* 平滑过渡效果 */
}

input[type="text"]:not(.has-content):focus {
	background-color: #fff; /* 输入框无内容时获得焦点的背景颜色 */
}

input[type="text"].has-content:focus {
	background-color: #f0ad4e; /* 输入框有内容时获得焦点的背景颜色 */
}

input[type="text"].has-content:not(:focus) {
	background-color: rgb(232, 240, 254); /* 输入框有内容且失去焦点的背景颜色 */
}