如何让聊天室输入框与发送按钮固定在屏幕底部并去除灰色边框？

解决代码 #

先给出修正后的完整HTML与CSS代码，直接替换原有代码即可实现需求：

HTML（修正无效标签与属性）

<div class="msg-inputs">
  <input class="msg-input" type="text" placeholder="Message" name="message" id="message" onkeydown="handleKeyDown(event)" />
  <button class="send-btn" type="button" name="send" id="send-btn" onclick="sendMessage()">Send</button>
</div>

CSS

/* 父容器固定在屏幕底部，用flex实现横向布局 */
.msg-inputs {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  gap: 8px; /* 输入框与按钮的间隙 */
  padding: 8px 12px;
  box-sizing: border-box;
  background-color: #181818;
}

.msg-input {
  flex: 1; /* 自动占据容器剩余空间 */
  background-color: #181818;
  color: #fff; /* 适配深色背景的文字颜色 */
  border: 1px solid #333; /* 自定义统一边框样式 */
  border-right: none; /* 移除右侧灰色边框 */
  border-bottom: none; /* 移除底部灰色边框 */
  padding: 10px 12px;
  outline: none; /* 移除聚焦时的默认灰色轮廓 */
}

.send-btn {
  background-color: #181818; 
  color: #ff9e3d;
  border: 2px solid #ff9e3d;
  padding: 0 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.send-btn:hover {
  background-color: #ff9e3d;
  color: white;
}

关键修改说明 #

• 统一固定布局与同行排列：不再给输入框、按钮单独设置fixed定位，而是将父容器.msg-inputs固定在底部，内部用display: flex实现横向排列，彻底避免元素错位问题。同时添加box-sizing: border-box防止内边距导致容器溢出屏幕。
• 精准移除指定边框：先给输入框设置统一的边框样式，再通过border-right: none和border-bottom: none直接移除右侧、底部的灰色边框；额外添加outline: none消除输入框聚焦时的默认灰色轮廓。
• 优化宽度适配：输入框用flex:1自动适配剩余空间，按钮通过内边距控制宽度，比固定百分比更适配不同屏幕尺寸。
• 细节修复：移除input上无效的rows属性（该属性仅适用于textarea），添加文字颜色避免深色背景下输入内容不可见。

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