You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

技术问询:如何修改表单控件的背景颜色?

表单样式修改方案

那么我该如何修改呢?例如我的表单当前样式如下:
当前表单样式

但我希望控件呈现如下样式:
目标表单样式


你可以通过以下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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.27 06:18:25