技术问询:如何修改表单控件的背景颜色?
表单样式修改方案
那么我该如何修改呢?例如我的表单当前样式如下:
但我希望控件呈现如下样式:
你可以通过以下CSS代码调整表单控件样式,匹配目标效果:
/* 统一表单控件基础样式 */ input, select, button { font-size: 14px; padding: 8px 12px; border-radius: 4px; box-sizing: border-box; border: 1px solid #ddd; } /* 输入框与下拉框样式优化 */ input[type="text"], input[type="password"], select { width: 100%; margin-bottom: 8px; } /* 控件聚焦状态 */ input:focus, select:focus { outline: none; border-color: #5b9dd9; box-shadow: 0 0 3px rgba(91, 157, 217, 0.5); } /* 按钮样式调整 */ button { background-color: #0073aa; color: #fff; border: none; cursor: pointer; } button:hover { background-color: #006799; }
根据你提供的样式差异,以上代码主要优化了控件的圆角、边框、内边距及交互状态,你可根据实际需求调整颜色、尺寸等参数。
内容的提问来源于stack exchange,提问作者FroZen Mitko
相关产品推荐
相关产品推荐

