短信验证码怎么写css

短信验证码通常会作为表单的一部分显示给用户，为了美观和易读，我们可以使用CSS来美化其样式。以下是编写短信验证码CSS的一些建议：

<!-- HTML结构示例 -->
<div class="sms-code-container">
  <input type="text" id="code-input" placeholder="请输入验证码">
  <button class="send-button">获取验证码</button>
  <span class="sent-message" style="display:none;">已发送到手机</span>
  <span class="verification-code" style="color: #009688; font-size: 14px; text-transform: uppercase;">示例验证码: 123456</span>
</div>

.sms-code-container {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

#code-input {
  width: 70%;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-sizing: border-box;
}

.send-button {
  background-color: #00bfff;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
  margin-left: 10px;
  transition: background 0.3s ease;
}

.send-button:hover {
  background-color: #008fa1;
}

.sent-message {
  color: green;
  font-style: italic;
  display: block;
  margin-top: 5px;
  visibility: hidden;
}

.verification-code {
  margin-top: 5px;
  font-weight: bold;
  text-align: center;
  opacity: .6; /* 验证码默认是半透明的 */
}

在这个例子中，我们设置了输入框的基本样式、按钮的样式以及验证码展示的样式。当验证码成功发送时，`.sent-message`元素将变为可见。可以根据实际需求调整颜色、字体大小、边距等。