如何为<input type="text">中用户输入的文本设置样式？

绝对可以！给<input type="text">里的内容（不管是用户输入的文本还是占位符提示）设置样式是前端开发里很常见的需求，咱们分几种情况来具体说：

这个最直接，用CSS选中input[type="text"]，然后设置字体相关的属性就行，比如颜色、字号、字体类型这些：

input[type="text"] {
  color: #2c3e50; /* 输入文本的颜色 */
  font-family: 'Arial', sans-serif; /* 字体 */
  font-size: 16px; /* 字号 */
  font-weight: 500; /* 字重 */
  /* 你还可以设置行高、字母间距这些，完全看你的设计需求 */
}

如果想美化输入框里的提示文字，比如让它变灰、变斜体，就用::placeholder伪元素。现在大部分现代浏览器都支持不带前缀的写法，要是需要兼容旧版浏览器，也可以加上厂商前缀：

/* 现代浏览器通用写法 */
input[type="text"]::placeholder {
  color: #95a5a6; /* 占位符颜色 */
  font-style: italic; /* 斜体 */
  font-size: 14px; /* 比输入文本小一点 */
}

/* 旧版浏览器兼容写法（现在基本很少用了，仅供参考） */
input[type="text"]::-webkit-input-placeholder { /* Chrome/Safari/Opera */
  color: #95a5a6;
}
input[type="text"]:-moz-placeholder { /* Firefox 18- */
  color: #95a5a6;
}
input[type="text"]::-moz-placeholder { /* Firefox 19+ */
  color: #95a5a6;
}
input[type="text"]:-ms-input-placeholder { /* IE 10+ */
  color: #95a5a6;
}

要是你想搞点花活，比如给邮箱里的@符号单独变红、加粗，纯CSS就做不到了——因为<input>的内容是纯文本，没法给部分内容加样式。这时候得用JavaScript配合模拟输入框的方式：

核心思路是用一个contenteditable="true"的div来模拟输入框的视觉效果，把真实的<input>隐藏，然后同步内容。这样就能给特定字符/文本块加HTML标签和样式了：

<!-- 页面结构 -->
<div class="email-input" contenteditable="true" data-placeholder="请输入你的邮箱"></div>
<!-- 真实输入框，用于提交数据 -->
<input type="hidden" id="real-email-input">

/* 模拟输入框的样式 */
.email-input {
  border: 1px solid #ddd;
  padding: 8px 12px;
  border-radius: 4px;
  min-height: 22px;
  font-size: 16px;
}
/* 模拟占位符 */
.email-input:empty:before {
  content: attr(data-placeholder);
  color: #95a5a6;
  font-style: italic;
}
/* 给@符号设置高亮样式 */
.email-input .highlight-at {
  color: #e74c3c;
  font-weight: bold;
}

// JavaScript逻辑：处理内容替换和光标定位
const inputSimulator = document.querySelector('.email-input');
const realInput = document.getElementById('real-email-input');

inputSimulator.addEventListener('input', function() {
  // 把输入内容里的@符号包裹成带样式的span
  const processedContent = this.textContent.replace(/@/g, '<span class="highlight-at">@</span>');
  this.innerHTML = processedContent;

  // 修复光标错位问题：替换HTML后把光标移到内容末尾
  const range = document.createRange();
  const selection = window.getSelection();
  range.selectNodeContents(this);
  range.collapse(false);
  selection.removeAllRanges();
  selection.addRange(range);

  // 把模拟框的内容同步到真实输入框，方便提交
  realInput.value = this.textContent;
});

这种方法要注意可访问性，比如确保屏幕阅读器能识别这个模拟的输入框，另外光标处理、回车换行这些细节也需要根据需求调整。

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