CSS设置输入框初始状态和禁用状态下“发送”按钮的样式代码怎么写

以下是关于CSS设置输入框初始状态和禁用状态下“发送”按钮的样式代码：

假设我们有一个input和button标签，分别用于输入和发送消息。我们可以使用CSS来设置输入框和按钮的样式，包括其初始状态和禁用状态。

首先，我们给输入框和发送按钮分别添加一个class名称：

<!-- 输入框 -->
<input type="text" class="input-box">

<!-- 发送按钮 -->
<button class="send-btn">发送</button>

然后，我们编写CSS样式代码，设置输入框和按钮的样式：

/* 输入框初始样式 */
.input-box {
  border: 1px solid #ccc;
  padding: 10px;
  font-size: 16px;
}

/* 发送按钮初始样式 */
.send-btn {
  background-color: blue;
  color: #fff;
  padding: 10px;
  border: none;
  font-size: 16px;
  cursor: pointer;
}

/* 输入框禁用样式 */
.input-box[disabled] {
  background-color: #eee;
  color: #999;
  cursor: not-allowed;
}

/* 发送按钮禁用样式 */
.send-btn[disabled] {
  background-color: #ddd;
  color: #999;
  cursor: not-allowed;
}

在上述代码中，我们首先定义了输入框和发送按钮的初始样式，包括其边框、内边距、字体大小、背景色等。然后，我们使用属性选择器来定义输入框和发送按钮的禁用样式，当禁用属性为真时，输入框和发送按钮的背景色、字体颜色和指针样式都将发生改变。

最后，我们可以使用JavaScript来动态切换输入框和按钮的禁用状态。例如，当输入框为空时，我们可以禁用发送按钮：

var inputBox = document.querySelector('.input-box');
var sendBtn = document.querySelector('.send-btn');

if (inputBox.value === '') {
  sendBtn.disabled = true;
} else {
  sendBtn.disabled = false;
}

这样，当输入框为空时，发送按钮将变为禁用状态，样式也将发生相应改变。