CSS中input元素样式不生效及美化需求求助

1. .input{}选择器失效的原因 #

你用的.input{}是类选择器，但你的<input>标签里只加了id="login"，没有class="input"属性，所以CSS无法匹配到这个元素。解决方法二选一：

• 给input标签添加class属性：<input type="text" id="login" class="input"/>
• 把CSS选择器改成id选择器：#login{}

2. 美化input和提交按钮的示例 #

下面是一套实用的表单美化代码，包含输入框和提交按钮的样式优化：

HTML代码 #

<form>
  <input type="text" id="login" class="input-field" placeholder="请输入账号"/>
  <button type="submit" class="submit-btn">提交</button>
</form>

CSS代码 #

/* 美化输入框 */
.input-field {
  /* 基础样式 */
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  width: 200px;
  /* 聚焦效果 */
  outline: none;
  transition: border-color 0.3s;
}

.input-field:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

/* 美化提交按钮 */
.submit-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background-color: #409eff;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
  margin-left: 8px;
}

.submit-btn:hover {
  background-color: #66b1ff;
}

3. 代码正确缩进与粘贴方法 #

在Stack Overflow提问时，要让代码格式清晰，有两种方法：

• 用三个反引号包裹代码块，开头指定语言（比如html、css），这样系统会自动高亮并保留缩进
• 给代码每一行手动缩进4个空格，也会被识别为代码块

比如你提供的代码，正确的粘贴格式应该是：

<input type="text" id="login"/>

内容的提问来源于stack exchange，提问作者Mantaro Kun